:root {
  /* structure */
  --app: #4a6488; --blue: #56749c; --blue-d: #3a5476; --blue-dd: #283c58; --blue-l: #7f9cc4; --navy: #2c4262; --ink: #1f2b40;
  /* inner panels */
  --cream: #fff8e8; --cream-b: #f0dcb0;
  /* accents and status colours */
  --gold: #ffc21a; --gold-l: #ffe070; --gold-d: #c77a00; --hp: #3fd05a; --exp: #37a4ff; --hunger: #ffb020; --mood: #ff6b8b;
  --atk: #ff5a4a; --heal: #3ddc84; --buff: #4aa8ff; --ram: #5ad1ff;
  --text: #fff; --muted: #c3cfe0;
  --edge: var(--ink);
  --r: 16px;
  --outline: 0 2px 0 var(--ink), 2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 -2px 0 var(--ink),
             1.5px 1.5px 0 var(--ink), -1.5px 1.5px 0 var(--ink), 1.5px -1.5px 0 var(--ink), -1.5px -1.5px 0 var(--ink), 0 4px 0 var(--ink);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--blue-dd); color: var(--text); overflow: hidden; }
html { touch-action: pan-x pan-y; } /* sem pinça nem duplo toque de zoom (o Safari é barrado no JS, gesturestart) */
body { font: 600 15px/1.2 'Fredoka', system-ui, sans-serif; -webkit-tap-highlight-color: transparent;
       user-select: none; -webkit-user-select: none; touch-action: manipulation; }
img { image-rendering: pixelated; -webkit-touch-callout: none; -webkit-user-drag: none; } /* segurar uma carta não abre "salvar imagem" */
button { font: inherit; }
a.btn { text-decoration: none; }
.pix, .label, .btn, #nav span, .hud-top { font-family: 'Lilita One', 'Fredoka', sans-serif; font-weight: 400; letter-spacing: .3px; }
.muted { color: var(--muted); }
.c-gold { color: var(--gold); } .c-ram { color: var(--ram); }
.row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.label { font-size: 13px; color: var(--text); }
.label.muted { color: var(--muted); }
.tip { margin: 8px 2px 0; font-size: 13px; font-weight: 500; color: var(--muted); }
i[data-icon] { display: inline-flex; vertical-align: middle; font-style: normal; }
i[data-icon] svg { display: block; }
svg { flex: none; }

/* ---------- chrome: cream panels, blue tiles, chunky buttons ---------- */
/* colours cascade through --text/--muted, so anything inside a panel reads dark-on-cream */
.px { --text: var(--ink); --muted: #6b7486; color: var(--text); background: var(--cream); border: 3px solid var(--blue-d);
      border-radius: var(--r); box-shadow: 0 3px 0 var(--blue-dd), 0 6px 10px #16223a33; }
.px-in { --text: #fff; --muted: #c8d3e3; color: var(--text); background: linear-gradient(#5d7ba3, #4c6890); border: 2px solid var(--blue-l);
         border-radius: 12px; box-shadow: 0 3px 0 var(--blue-dd), inset 0 1px 0 #ffffff40; }
.btn { --text: #fff; --muted: #d6dfeb; border: 2px solid var(--blue-dd); color: var(--text); padding: 9px 12px; font-size: 14px; cursor: pointer; display: inline-flex;
       align-items: center; justify-content: center; gap: 6px; border-radius: 12px; background: linear-gradient(#6a88b2, #56749c);
       box-shadow: 0 3px 0 var(--blue-dd), inset 0 2px 0 #ffffff55; text-shadow: 0 1.5px 0 #283c5899; transition: translate .06s; }
.btn:not(:disabled):active { translate: 0 2px; box-shadow: 0 1px 0 var(--blue-dd), inset 0 2px 0 #ffffff55; }
.btn:disabled { opacity: .5; cursor: default; filter: saturate(.5); }
.btn.gold { --text: #5a3200; background: linear-gradient(var(--gold-l), var(--gold)); border-color: var(--gold-d);
            box-shadow: 0 3px 0 var(--gold-d), inset 0 2px 0 #ffffffaa; text-shadow: 0 1px 0 #ffffff88; }
.btn.gold:not(:disabled):active { box-shadow: 0 1px 0 var(--gold-d), inset 0 2px 0 #ffffffaa; }
.btn.big { width: 100%; padding: 12px; font-size: 17px; }
.btn.glow { animation: pulse .7s ease-in-out infinite alternate; }
@keyframes pulse { to { filter: brightness(1.18); box-shadow: 0 3px 0 var(--gold-d), 0 0 14px #ffe070; } }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; font-size: 13px; color: #fff; background: var(--navy);
        border: 2px solid var(--blue-dd); border-radius: 999px; }
.chip b { font: 400 14px 'Lilita One', sans-serif; }
button.chip { cursor: pointer; }

/* ---------- app shell: exactly one screen ---------- */
/* Áreas seguras (barra de status em cima, indicador de home embaixo) em variáveis, pra um teste simulá-las. No app
   instalado do iPhone a barra de status é opaca (--sat = 0); --sat só vale onde a página passa por baixo dela.
   O recuo de baixo fica na cor do painel, então o rodapé emenda até a borda. */
:root { --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); }
#app { position: fixed; top: 0; bottom: 0; left: 0; right: 0; max-width: 480px; margin: 0 auto; display: flex; flex-direction: column;
       padding: 0 0 max(0px, var(--sab) - var(--vgap, 0px)); background: #465f85; } /* o indicador de home cai na faixa do --vgap */
#top { position: absolute; top: var(--sat); left: 0; right: 0; z-index: 9; display: flex; align-items: center; gap: 6px; padding: 5px 8px 7px; }
.pill { display: inline-flex; align-items: center; gap: 3px; height: 40px; padding: 0 3px 0 3px; flex: none; border-radius: 14px;
        background: linear-gradient(#56749c, #455e84); border: 2px solid var(--blue-dd); box-shadow: 0 3px 0 var(--blue-dd); color: #fff; }
.pill b { font: 400 18px 'Lilita One', sans-serif; min-width: 14px; text-shadow: 0 2px 0 var(--blue-dd); }
.pill .plus { width: 28px; height: 28px; display: grid; place-items: center; border: 2px solid var(--blue-dd); border-radius: 10px; cursor: pointer;
              background: linear-gradient(#7896bf, #5a78a1); box-shadow: inset 0 2px 0 #ffffff66, 0 2px 0 var(--blue-dd); padding: 0; }
.pill .plus:active { translate: 0 1px; }
.pill.sq { width: 40px; padding: 0; justify-content: center; cursor: pointer; }
.pill.sq:active { translate: 0 2px; box-shadow: 0 1px 0 var(--blue-dd); }
#top-title { flex: 1; min-width: 0; height: 44px; display: grid; place-items: center; padding: 0 6px; border-radius: 16px;
             background: linear-gradient(#56749c, #455e84); border: 2px solid var(--blue-dd); box-shadow: 0 3px 0 var(--blue-dd), inset 0 2px 0 #ffffff40;
             color: var(--gold-l); font-size: clamp(14px, 4.8vw, 22px); letter-spacing: 0; text-shadow: var(--outline); white-space: nowrap; overflow: hidden; }

#stage { position: relative; overflow: hidden; flex: none; background: #8fd6ff; }
/* véu escuro no alto da arena: onde a página passa por baixo da barra de status, deixa o relógio legível; no app
   instalado, emenda a barra de status opaca (theme-color #16223a) na arena, sem degrau */
#stage::before { content: ''; position: absolute; left: 0; right: 0; top: 0; z-index: 1; pointer-events: none;
                 height: calc(var(--sat) * 1.6); background: linear-gradient(#16223ab3, #16223a00); }
#scene { position: absolute; left: 0; top: 0; width: 320px; transform-origin: 0 0; overflow: hidden;
         background: #000 center bottom / cover no-repeat; image-rendering: pixelated; }
/* the content sheet overlaps the bottom of the arena */
#content { flex: 1; min-height: 0; overflow: hidden auto; scrollbar-width: none; padding: 12px 10px 6px; margin-top: -14px; position: relative; z-index: 5;
           background: linear-gradient(#56749c, #465f85 40%); border-radius: 22px 22px 0 0; border-top: 3px solid var(--blue-l);
           box-shadow: 0 -4px 10px #16223a40; }
#content > section { display: flex; flex-direction: column; gap: 8px; }
#content > section[hidden] { display: none; }

#nav { flex: none; position: relative; z-index: 6; transform: translateZ(0); /* camada própria: no Safari a lista que rola
        (#content) sobe pra uma camada gráfica e passava por cima do brilho do JOGAR, apesar do z-index */ display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; gap: 5px; padding: 5px 6px 7px; }
#nav[hidden] { display: none; }
#nav button { position: relative; border: 2px solid #1e2e45; border-radius: 14px; color: #fff; padding: 4px 0 3px; cursor: pointer;
              display: flex; flex-direction: column; align-items: center; gap: 1px; background: linear-gradient(#5d7ba3, #465f85);
              box-shadow: 0 3px 0 #1e2e45, inset 0 2px 0 #ffffff40; }
#nav button:active { translate: 0 2px; box-shadow: 0 1px 0 #1e2e45; }
/* `translate` do :active cria contexto de empilhamento e prende o ponto dentro do botão: aí o próprio botão sobe */
#nav button.dot:active { z-index: 2; }
#nav span { font-size: 12px; text-shadow: 0 1.5px 0 var(--blue-dd); }
.nav-ic { width: 32px; height: 32px; object-fit: contain; }
#nav button.on { color: var(--ink); background: linear-gradient(var(--gold-l), var(--gold)); border-color: var(--gold-d);
                 box-shadow: 0 3px 0 var(--gold-d), inset 0 2px 0 #ffffffaa, 0 0 12px #ffd23f88; }
#nav button.on span { text-shadow: none; }
#nav button.dot::after { content: ''; position: absolute; top: -4px; right: -3px; width: 12px; height: 12px; border-radius: 50%;
                         z-index: 2; /* o JOGAR é maior e invade o botão vizinho: sem isto o ponto nasce atrás dele */
                         background: var(--atk); border: 2px solid #fff; animation: pulse2 .6s ease-in-out infinite alternate; }
@keyframes pulse2 { to { scale: 1.2; } }
/* JOGAR sits in the middle, bigger and lifted out of the bar */
#nav #play-btn { padding: 7px 0 8px; margin: -12px -4px 0; border-radius: 16px;
                 background: linear-gradient(#ffb020, #e2621b); border-color: #7a3200;
                 box-shadow: 0 4px 0 #7a3200, 0 0 18px #ffb02088, inset 0 2px 0 #ffffff66; }
#nav #play-btn svg { width: 30px; height: 30px; }
#nav #play-btn span { font-size: 13px; }
#nav #play-btn.on { color: var(--ink); background: linear-gradient(var(--gold-l), var(--gold)); border-color: var(--gold-d);
                    box-shadow: 0 4px 0 var(--gold-d), 0 0 18px #ffd23f88, inset 0 2px 0 #ffffffaa; }

/* ---------- scene ---------- */
.mon { position: absolute; bottom: 26px; translate: -50% 0; transform-origin: 50% 100%; image-rendering: pixelated; }
.mon.gone { opacity: 0; transition: opacity .5s steps(4); }
@keyframes lunge { 50% { translate: calc(-50% - 24px) 0; } }
@keyframes lunge-r { 50% { translate: calc(-50% + 24px) 0; } }
@keyframes shake { 0%, 60% { filter: brightness(2) sepia(1) hue-rotate(-50deg) saturate(6); }
                   25% { translate: calc(-50% + 4px) 0; } 75% { translate: calc(-50% - 4px) 0; } }
@keyframes jump { 40% { translate: -50% -20px; } 70% { translate: -50% -8px; } }

.hud { position: absolute; top: var(--hud-top, 6px); width: 136px; padding: 3px 7px 5px; font-size: 9px; border-width: 2px; border-radius: 10px;
       box-shadow: 0 2px 0 var(--blue-dd); background: #fff8e8ee; }
#hud-enemy { left: 6px; } #hud-pet { right: 6px; }
#hud-enemy.boss { background: #ffe1e1ee; border-color: #c62c3c; }
.hud-top { display: flex; justify-content: space-between; margin-bottom: 3px; gap: 4px; white-space: nowrap; font-size: 10px; }
.hud-name { overflow: hidden; text-overflow: ellipsis; }
.hud-sub { display: flex; justify-content: space-between; margin-top: 2px; font-size: 8px; color: var(--muted); }
.hud-sub .buffs { color: var(--gold-d); }
.hud .bar { height: 6px; border-width: 1.5px; }
.lv { color: var(--gold-d); }

.bar { position: relative; height: 12px; background: var(--navy); border: 2px solid var(--ink); border-radius: 999px; flex: 1; overflow: hidden; }
.bar i { display: block; height: 100%; width: 100%; background: var(--hp); border-radius: 999px; transition: width .25s;
         background-image: linear-gradient(#ffffff55 0 35%, transparent 35%); }
.bar.hp.low i { background-color: var(--atk); }
.bar.exp i { background-color: var(--exp); }

#fx { position: absolute; inset: 0; pointer-events: none; }
.float { position: absolute; font: 400 14px 'Lilita One', sans-serif; color: #fff; translate: -50% 0; white-space: nowrap;
         text-shadow: 1.5px 0 0 var(--ink), -1.5px 0 0 var(--ink), 0 1.5px 0 var(--ink), 0 -1.5px 0 var(--ink), 0 2.5px 0 var(--ink);
         animation: floatup .9s ease-out forwards; }
.float.dmg { color: var(--atk); } .float.heal { color: var(--heal); } .float.info { color: var(--gold); font-size: 12px; }
.float.card { color: #fff; font-size: 11px; background: var(--ink); padding: 3px 7px; border-radius: 8px; text-shadow: none; }
.float.crit { color: var(--gold); font-size: 18px; }
.float.virus { color: var(--heal); font-size: 11px; }
.float.big { font-size: 19px; }
@keyframes floatup { to { translate: -50% -34px; opacity: 0; } }
#flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
#flash.on { animation: flash 1.4s steps(7); }
@keyframes flash { 20%, 40%, 60% { opacity: 1; } 30%, 50% { opacity: .2; } }

/* ---------- pet tab ---------- */
#pet-card { display: flex; gap: 10px; padding: 6px 8px 6px 6px; align-items: stretch; }
.portrait { position: relative; width: 92px; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 12px;
            border: 3px solid var(--gold); box-shadow: 0 0 0 2px var(--gold-d), 0 3px 0 2px var(--gold-d);
            background: linear-gradient(#7fd0ff 0 55%, #7fdc6a 55% 70%, #55b848 70%); }
.portrait img { width: 74px; height: 74px; object-fit: contain; }
.portrait .attr { position: absolute; left: 3px; top: 3px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; padding: 0;
                  background: #fff; border: 2px solid var(--ink); box-shadow: 0 2px 0 var(--ink); cursor: pointer; z-index: 1; }
.portrait .attr:active { translate: 0 1px; box-shadow: 0 1px 0 var(--ink); }
.pet-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; justify-content: center; }
.pet-id .row { align-items: flex-start; }
#pet-name { font-size: 25px; line-height: 1; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-badge { flex: none; padding: 3px 12px 4px; font-size: 20px; color: var(--gold-l); border-radius: 12px; text-shadow: 0 2px 0 #4a2400;
            background: linear-gradient(#a4652a, #7a4516); border: 2px solid #4a2400; box-shadow: 0 3px 0 #4a2400, inset 0 2px 0 #ffffff40; }
#pet-meta { display: flex; align-items: center; gap: 4px; font-size: 14px; color: #4a5568; white-space: nowrap; overflow: hidden; }
#pet-meta span { overflow: hidden; text-overflow: ellipsis; }
.bar-l { display: flex; align-items: center; gap: 5px; }
.bar-l > span { font: 400 13px 'Lilita One', sans-serif; width: 46px; color: var(--ink); }
.bar-l em { font-style: normal; font-weight: 700; font-size: 13px; min-width: 44px; text-align: right; color: var(--ink); }
.bar.hunger i { background-color: var(--hunger); } .bar.mood i { background-color: var(--mood); }

/* fileira de ações da home: cada botão com a sua cor, o ícone num disco claro e o nome numa plaquinha */
#home-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.act { --c: #56749c; --c-l: #7f9cc4; --c-d: #283c58; /* cor de cada ação vem do id, abaixo */
       position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
       padding: 6px 2px 6px; cursor: pointer; color: #fff; border-radius: 15px; border: 3px solid var(--ink);
       background: linear-gradient(#ffffff7a, #ffffff00 42%), linear-gradient(var(--c-l), var(--c));
       box-shadow: 0 4px 0 var(--c-d), inset 0 2px 0 #ffffff55; }
.act::before { /* disco claro atrás do ícone: o mesmo truque dos chips, faz o pixel art saltar de qualquer cor */
  content: ''; position: absolute; top: 5px; left: 50%; translate: -50% 0; width: 36px; height: 36px; border-radius: 50%;
  background: radial-gradient(circle at 42% 32%, #fffdf4, #eddfc0); border: 2px solid var(--ink);
  box-shadow: inset 0 -3px 0 #cbb88f; }
.act:not(:disabled):active { translate: 0 3px; box-shadow: 0 1px 0 var(--c-d), inset 0 2px 0 #ffffff55; }
.act:disabled { cursor: default; filter: saturate(.35) brightness(.82); }
.act-ic { position: relative; z-index: 1; width: 32px; height: 32px; margin: 3px 0 2px; object-fit: contain;
          filter: drop-shadow(0 1.5px 0 #1f2b4055); } /* 64px da arte em 32 = metade exata: pixel quadrado */
.act > span:not(.badge) { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px 2px;
              border-radius: 999px; background: #1f2b40d9; border: 1.5px solid #ffffff40;
              font: 400 11px 'Lilita One', sans-serif; text-shadow: 0 1.5px 0 var(--ink); }
.act em { font-style: normal; display: inline-flex; align-items: center; gap: 1px; color: var(--gold-l); }
.act em b { font: 400 11px 'Lilita One', sans-serif; }
.act.dot::after { content: ''; position: absolute; top: -6px; right: -6px; width: 14px; height: 14px; border-radius: 50%;
                  background: var(--atk); border: 2px solid #fff; animation: pulse2 .6s ease-in-out infinite alternate; }
.act .badge { top: -6px; right: -6px; }
/* a cor de cada ação (claro / base / escuro) */
#feed     { --c: #e07b13; --c-l: #ffb245; --c-d: #8f4400; }
#act-play { --c: #d43a72; --c-l: #ff7ba8; --c-d: #8a1a44; }
#evo-open { --c: #7a4de0; --c-l: #b28cff; --c-d: #43248f; }
#act-chat { --c: #0f97b8; --c-l: #56d3ef; --c-d: #075a71; }
.pm-item i[data-icon] { flex: none; width: 44px; height: 44px; display: grid; place-items: center; }
/* os contadores que saíram da home, no painel onde eles decidem alguma coisa */
.evo-counts { display: flex; align-items: center; justify-content: center; gap: 14px; margin: -4px 0 6px;
              font-size: 12px; color: var(--muted); }
.evo-counts span { display: inline-flex; align-items: center; gap: 4px; }
.evo-counts b { font: 400 14px 'Lilita One', sans-serif; color: #fff; }

.care-tags { font-size: 13px; color: var(--gold-l); min-height: 1em; margin: -3px 4px 0; text-shadow: 0 1px 0 var(--blue-dd); }
.care-tags:empty { display: none; }
.care-tags .bad { color: #ffb3b3; }

#chat-panel { padding: 0 8px 8px; }
.evo-mini { padding: 5px 10px; font-size: 12px; }
#chat-log { display: flex; flex-direction: column; gap: 6px; min-height: 96px; height: 30dvh; max-height: 240px; overflow: hidden auto; padding: 2px; scrollbar-width: thin; }
#chat-form { margin-top: 6px; }
.evo-head { display: flex; justify-content: space-between; align-items: center; margin: 0 -8px 6px; }
.evo-tab { position: relative; display: flex; align-items: center; gap: 6px; padding: 6px 22px 6px 10px; font-size: 17px; color: #fff; text-shadow: 0 2px 0 var(--blue-dd);
           background: linear-gradient(#5d7ba3, #465f85); border-radius: 0 0 18px 0; }
#evo-lv { font-size: 17px; color: var(--ink); padding-right: 10px; }
#evo-opts { display: flex; align-items: center; gap: 6px; }
#evo-opts > .tip { color: var(--muted); margin: 0 4px; }
.evo-opt { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; padding: 0 0 6px; text-align: center; overflow: hidden;
           align-self: stretch; }
.evo-opt .sil { width: 100%; height: 44px; display: grid; place-items: end center; padding-bottom: 4px;
                background: linear-gradient(#78c6ff, #bfe8ff 55%, #5fb54e 55% 72%, #3f8e3a 72%); border-bottom: 2px solid var(--blue-dd); }
.evo-opt .sil img { max-height: 40px; max-width: 70px; }
.evo-opt b { font-size: 16px; margin-top: 3px; text-shadow: 0 1.5px 0 var(--blue-dd); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 4px; }
.evo-opt em { font: 400 16px/1 'Lilita One', sans-serif; font-style: normal; color: var(--gold-l); text-shadow: 0 1.5px 0 var(--blue-dd); }
.evo-opt .reqs { display: flex; flex-direction: column; gap: 0; margin-top: 3px; width: 100%; padding: 0 7px; }
.evo-opt .reqs span { display: flex; justify-content: space-between; gap: 4px; font-size: 12px; line-height: 1.12; color: #fff; white-space: nowrap; }
.evo-opt .reqs span i { font-style: normal; overflow: hidden; text-overflow: ellipsis; }
.evo-opt .reqs span i:last-child { flex: none; }
.evo-opt .reqs span.ok, .evo-opt em.ok { color: #8dffa8; }
.evo-opt.ok { cursor: pointer; border-color: #8dffa8; }
.evo-opt.sel { border-color: var(--gold); box-shadow: 0 3px 0 var(--gold-d), 0 0 0 2px var(--gold), 0 0 14px #ffe07099; }
.unknown { filter: brightness(0) opacity(.7); }
#evolve, #rebirth { margin-top: 8px; }


/* ---------- status (build) ---------- */
#train { display: flex; flex-direction: column; gap: 6px; }
.st-row { display: grid; grid-template-columns: 30px 1fr auto auto; align-items: center; gap: 8px; padding: 6px 8px; }
.st-row .st-name { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.st-row .st-name b { font: 400 17px 'Lilita One', sans-serif; }
.st-row .st-name small { font-size: 12px; font-weight: 500; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-row .st-val { font: 400 20px 'Lilita One', sans-serif; min-width: 44px; text-align: right; }
.st-row .st-btns { display: flex; gap: 5px; }
.st-row .btn { padding: 7px 8px; font-size: 13px; gap: 3px; }
.st-row .btn.plus { --text: #5a3200; background: linear-gradient(var(--gold-l), var(--gold)); border-color: var(--gold-d);
                    box-shadow: 0 3px 0 var(--gold-d), inset 0 2px 0 #ffffffaa; text-shadow: none; }
.st-foot .tip { margin: 0; flex: 1; }
#respec { font-size: 12px; padding: 7px 9px; gap: 3px; }
.path { display: flex; align-items: center; gap: 12px; padding: 10px 12px; }
.path img { max-height: 48px; max-width: 64px; }
.path div { display: flex; flex-direction: column; gap: 4px; }
.path b { font-size: 16px; } .path small { font-size: 13px; color: var(--heal); }

/* ---------- tamer chips ---------- */
.dp-card { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 10px; padding: 8px 12px; }
.dp-num { display: flex; flex-direction: column; line-height: 1; }
.dp-num b { font-size: 30px; color: var(--gold-l); text-shadow: var(--outline); }
.dp-num small { font-size: 11px; color: var(--muted); margin-top: 3px; white-space: nowrap; }
.dp-card p { margin: 0; font-size: 12px; font-weight: 500; line-height: 1.25; color: var(--muted); }

#chip-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.chip-tab { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 2px 5px; cursor: pointer;
            border-radius: 14px; border: 2px solid var(--blue-dd); color: #fff; background: linear-gradient(#5d7ba3, #465f85);
            box-shadow: 0 3px 0 var(--blue-dd), inset 0 2px 0 #ffffff33; }
.chip-tab:active { translate: 0 2px; box-shadow: 0 1px 0 var(--blue-dd); }
.chip-tab span { font: 400 13px 'Lilita One', sans-serif; text-shadow: 0 1.5px 0 var(--blue-dd); }
.chip-tab small { font-size: 10px; color: var(--muted); }
.chip-tab.on { background: var(--bc); border-color: var(--ink); box-shadow: 0 3px 0 var(--ink), inset 0 2px 0 #ffffff66, 0 0 12px color-mix(in srgb, var(--bc) 60%, transparent); }
.chip-tab.on svg { filter: drop-shadow(0 1.5px 0 var(--ink)); }
.chip-tab.on small { color: var(--ink); }
.chip-tab.on span { color: #fff; text-shadow: var(--outline); }
.chip-tab.dot::after { content: ''; position: absolute; top: -4px; right: -3px; width: 12px; height: 12px; border-radius: 50%;
                       background: var(--atk); border: 2px solid #fff; animation: pulse2 .6s ease-in-out infinite alternate; }

/* rows of one branch, joined by a coloured spine behind the icons */
#chips { position: relative; display: flex; flex-direction: column; gap: 8px; }
#chips::before { content: ''; position: absolute; left: 30px; top: 24px; bottom: 24px; width: 6px; border-radius: 3px;
                 background: var(--bc); box-shadow: 0 0 0 2px var(--ink); }
.chip-row { position: relative; display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 10px; padding: 7px 8px; }
.chip-ic { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; border: 3px solid var(--ink);
           background: radial-gradient(circle at 35% 30%, #fff, color-mix(in srgb, var(--bc) 45%, #fff)); box-shadow: 0 3px 0 var(--ink); }
.chip-txt { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.chip-name { display: flex; align-items: center; gap: 6px; }
.chip-name b { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip-rank { flex: none; font: 400 11px 'Lilita One', sans-serif; padding: 1px 6px; border-radius: 999px; color: #fff; background: var(--ink); }
.chip-txt small { font-size: 12px; font-weight: 500; line-height: 1.2; color: #4a5568; }
.chip-txt small.next { color: #1f9e4a; font-weight: 600; }
.chip-seg { display: flex; gap: 2px; margin-top: 3px; max-width: 160px; }
.chip-seg s { flex: 1; height: 7px; border-radius: 3px; background: #dcd2bc; box-shadow: inset 0 1px 0 #0000001a; }
.chip-seg s.on { background: var(--bc); box-shadow: inset 0 -2px 0 #0000002a, 0 0 0 1px color-mix(in srgb, var(--bc) 70%, var(--ink)); }
.chip-act { display: flex; align-items: center; }
.chip-buy { flex-direction: column; gap: 0; padding: 5px 10px 4px; font-size: 18px; line-height: 1; min-width: 52px; }
.chip-buy small { font-size: 10px; }
.chip-max { font-size: 14px; color: #fff; padding: 5px 9px; border-radius: 10px; background: #1f9e4a; border: 2px solid #0f5a2a;
            box-shadow: 0 2px 0 #0f5a2a; text-shadow: 0 1.5px 0 #0f5a2a; }
.chip-need { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 52px; }
.chip-need b { font: 400 12px 'Lilita One', sans-serif; color: #6b7486; }
.chip-row.lock { background: #ece6d8; border-color: #6b7486; }
.chip-row.lock .chip-ic { filter: grayscale(1); opacity: .6; }
.chip-row.lock .chip-name b { color: #6b7486; }
.chip-row.maxed { border-color: #1f9e4a; }
.chip-row.up { animation: chip-up .45s cubic-bezier(.34, 1.56, .64, 1); }
.chip-row.up .chip-ic { animation: chip-ic .6s ease-out; }
@keyframes chip-up { 40% { scale: 1.03; } }
@keyframes chip-ic { 0% { box-shadow: 0 3px 0 var(--ink), 0 0 0 0 var(--bc); } 100% { box-shadow: 0 3px 0 var(--ink), 0 0 0 14px transparent; } }

/* ---------- cards: BattleChip body; frame = level (bronze / silver / gold), gem = rarity ---------- */
.card { --text: #fff; position: relative; border: 3px solid var(--fr); border-radius: 12px; color: var(--text); padding: 0; display: flex;
        flex-direction: column; align-items: stretch; cursor: pointer; text-align: center; min-width: 0; --k: var(--buff); --fr: #c98a4e; --rc: #93a1b5;
        background: linear-gradient(#465f85, #34496a); margin: 4px; overflow: hidden;
        box-shadow: 0 0 0 2px var(--ink), 0 4px 0 2px var(--ink);
        transition: translate .18s cubic-bezier(.34, 1.56, .64, 1), scale .18s cubic-bezier(.34, 1.56, .64, 1); }
.card.atk { --k: var(--atk); } .card.heal { --k: var(--heal); } .card.buff { --k: var(--buff); }
/* body colour = rarity: the whole card changes tone, not just a 8px dot */
.card[data-r=rara] { --rc: #4aa8ff; background: linear-gradient(#3d6699, #2b4872); }
.card[data-r=epica] { --rc: #c77dff; background: linear-gradient(#5b3f80, #382457); }
.card[data-lv="2"] { --fr: #e3ebf5; box-shadow: 0 0 0 2px var(--ink), 0 4px 0 2px var(--ink), 0 0 10px 2px #ffffff55; }
.card[data-lv="3"] { --fr: #ffc21a; box-shadow: 0 0 0 2px var(--ink), 0 4px 0 2px var(--ink), 0 0 14px 3px #ffd23f88; }
/* nível 2+: uma luz correndo pela borda, na cor do metal da moldura */
@property --ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.card[data-lv="2"]::after, .card[data-lv="3"]::after { content: ''; position: absolute; inset: 0; border-radius: 12px; padding: 4px; pointer-events: none;
  mix-blend-mode: screen;
  background: conic-gradient(from var(--ang), #0000 0 60%, #7fd3ff 78%, #fff 90%, #0000 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; animation: edge 3.4s linear infinite; }
.card[data-lv="3"]::after { animation-duration: 2.1s;
  background: conic-gradient(from var(--ang), #0000 0 54%, #ffd23f 72%, #fff 82%, #ff9aff 88%, #0000 100%); }
@keyframes edge { to { --ang: 360deg; } }
.card.can-fuse { animation: can-fuse 1.1s ease-in-out infinite alternate; }
@keyframes can-fuse { to { box-shadow: 0 0 0 2px var(--ink), 0 4px 0 2px var(--ink), 0 0 14px 4px #8dffa8aa; } }
.fuse-tag { align-self: center; margin-top: -2px; font: 400 10px 'Lilita One', sans-serif; padding: 1px 7px; border-radius: 999px; white-space: nowrap;
            background: #1f9e4a; color: #fff; border: 1.5px solid var(--ink); animation: pulse2 .6s ease-in-out infinite alternate; }
.fuse-tag.blocked { background: #b8741a; animation: none; } /* tem 3 iguais, mas o deck cairia abaixo do mínimo */
@media (hover: hover) { .card:not(:disabled):not(.off):hover { translate: 0 -5px; scale: 1.04; z-index: 2; } }
.card:not(:disabled):not(.off):active { scale: .95; }
.card.off { cursor: default; }
.card.off .c-art, .card.off .c-top { filter: grayscale(1) brightness(.6); }
/* header: kind tag (neutral) + rarity tag (the rarity colour, the loudest cue on the card) */
.c-top { display: flex; align-items: stretch; font: 400 9.5px/1.5 'Lilita One', sans-serif; color: #fff; }
.c-kind { flex: none; display: inline-flex; align-items: center; gap: 3px; padding: 3px 4px; background: #22304a; color: #cdd8e8; }
.c-kind em { font-style: normal; }
.c-rar { flex: 1; padding: 3px 4px; background: var(--rc); color: var(--rct, #fff); text-shadow: 0 1px 0 #00000055; white-space: nowrap; overflow: hidden; }
.c-cost { display: flex; gap: 2px; align-items: center; padding: 3px 4px; background: #22304a; }
.c-cost s { width: 5px; height: 5px; border-radius: 50%; background: var(--gold-l); text-decoration: none; }
.c-cost em { font-style: normal; color: #cdd8e8; }
/* level: metallic frame plus a corner badge — a plain card is level 1 */
.nova-tag { position: absolute; bottom: 3px; left: 3px; padding: 0 5px; border-radius: 6px; border: 1.5px solid var(--ink); box-shadow: 0 2px 0 var(--ink);
            background: var(--gold); color: var(--ink); font: 400 11px 'Lilita One', sans-serif; letter-spacing: .2px; }
.c-nv { position: absolute; top: 3px; right: 3px; padding: 0 5px; border-radius: 6px; border: 1.5px solid var(--ink); box-shadow: 0 2px 0 var(--ink);
        background: var(--fr); color: var(--ink); font: 400 11px 'Lilita One', sans-serif; letter-spacing: .2px; }
.c-art { position: relative; margin: 4px 4px 0; border-radius: 8px; overflow: hidden; background: #16223a; box-shadow: inset 0 0 0 2px #1a2840; }
.c-art img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; image-rendering: pixelated; }
/* altura fixa de 2 linhas: nome longo não pode deixar a carta mais alta que as vizinhas */
.c-name { font-size: 13px; font-weight: 600; padding: 4px 3px 0; line-height: 1.1; height: 2.2em; display: flex; align-items: center; justify-content: center; text-align: center; }
.c-name > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.c-val { font: 400 11px 'Lilita One', sans-serif; color: var(--gold-l); padding: 2px 2px 6px; }
.card:disabled { cursor: default; }
.card:disabled .c-art, .card:disabled .c-top { filter: grayscale(1) brightness(.6); }
.card.new { animation: cardin .35s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes cardin { from { translate: 0 30px; scale: .6; opacity: 0; } }
.card .count { position: absolute; top: -2px; right: -2px; background: var(--gold); color: var(--ink); font: 400 11px 'Lilita One', sans-serif;
               padding: 2px 5px; border-radius: 0 9px 0 8px; border: 2px solid var(--ink); z-index: 1; }

#filters, #filters2, #map-pages { display: flex; flex-wrap: wrap; gap: 3px; }
#filters .chip, #filters2 .chip, #map-pages .chip { font: 400 11px 'Lilita One', sans-serif; padding: 4px 8px; }
#filters .chip.on, #filters2 .chip.on, #map-pages .chip.on { color: var(--ink); background: var(--gold); border-color: var(--gold-d); }
#deck-n.bad { color: #ffb020; }
/* the cards screen owns the whole app: arena out of the way, textured slate background behind the grid */
#app.cards-anim #stage { transition: height .34s cubic-bezier(.4, 0, .2, 1); }
#app.cards-anim #content { transition: margin-top .34s cubic-bezier(.4, 0, .2, 1), padding-top .34s cubic-bezier(.4, 0, .2, 1), border-radius .34s; }
#app.cards-mode #stage { height: 0 !important; }
#app.cards-mode #content > section[data-tab=cards] { animation: cards-in .3s ease-out backwards; }
@keyframes cards-in { from { opacity: 0; translate: 0 16px; } }
#app.cards-mode #content { margin-top: 0; padding-top: calc(var(--top-h, 54px) + 10px); border-radius: 0; border-top: 0;
  background-image:
    repeating-linear-gradient(45deg, #ffffff07 0 5px, #00000000 5px 10px),
    repeating-linear-gradient(-45deg, #00000012 0 5px, #00000000 5px 10px),
    radial-gradient(130% 55% at 50% 0%, #ffffff10, #00000000 65%),
    linear-gradient(#3f567b, #354866); }
.cards-search { display: flex; align-items: center; gap: 6px; padding: 3px 5px 3px 10px; border-radius: 14px;
                background: #16223a99; border: 2px solid var(--blue-l); box-shadow: 0 2px 0 #16223a55; }
.cards-search input { flex: 1; min-width: 0; border: 0; background: none; color: #fff; outline: none; font: 500 15px 'Fredoka', sans-serif; }
.cards-search input::placeholder { color: #9fb0c8; }
.cards-search .btn { padding: 2px 9px; font-size: 12px; }
#presets { display: flex; flex-wrap: wrap; gap: 4px; }
.preset { position: relative; display: flex; align-items: baseline; gap: 5px; padding: 5px 22px 5px 11px; cursor: pointer; color: #fff;
          border-radius: 999px; background: linear-gradient(#6a88b2, #56749c); border: 2px solid var(--blue-dd); box-shadow: 0 2px 0 var(--blue-dd);
          font: 400 13px 'Lilita One', sans-serif; }
.preset small { font-size: 11px; color: #c8d3e3; }
.preset .x { position: absolute; right: 7px; top: 50%; translate: 0 -50%; font-size: 11px; color: #ffd9d6; }
.preset.bad { border-color: #d8382c; box-shadow: 0 2px 0 #7a1810; }
.preset:active { translate: 0 2px; box-shadow: none; }
#collection { display: flex; flex-direction: column; }
.col-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px 2px; } /* 4 colunas: cabe tipo, poder e selo */
.col-head { display: flex; justify-content: space-between; align-items: center; margin: 7px 1px 1px; padding: 3px 10px; border-radius: 999px;
            font: 400 13px 'Lilita One', sans-serif; color: #fff; background: #16223a88; }
.col-head b { font-weight: 400; color: var(--gold-l); }
.col-head.in { background: linear-gradient(90deg, #e2621b, #ffb020); text-shadow: 0 1.5px 0 #7a3200; box-shadow: 0 2px 0 #7a3200; }
.col-head.in b { color: #fff; }
.col-item.in-deck .card { box-shadow: 0 0 0 2px var(--gold), 0 3px 6px #16223a66; }
/* arrastar carta pro deck / pra coleção */
.card { -webkit-user-select: none; user-select: none; }
.card.dragging { opacity: .3; }
.drag-ghost { position: fixed; left: 0; top: 0; z-index: 40; margin: 0; pointer-events: none; opacity: .95;
              filter: drop-shadow(0 10px 12px #0009); }
.col-head.drop-on, .col-grid.drop-on { outline: 2px dashed var(--gold-l); outline-offset: 3px; border-radius: 12px; }
#collection .card { margin: 4px 3px; }
#collection .c-name { font-size: 12px; padding: 2px 3px 4px; }
#collection .c-val { display: none; } /* o que a carta faz só no detalhe */
#collection .c-cost { display: none; } /* custo de RAM só interessa em batalha */
#collection .c-kind svg { display: none; } /* em 78px o ícone empurraria a raridade pra fora */
#collection .c-kind, #collection .c-rar { padding: 3px; }
.col-item { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.shop { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; }
.shop-item { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; cursor: pointer; font: inherit; text-align: left; }
.shop-item:not(:disabled):active { translate: 0 2px; }
.shop-item:disabled { opacity: .55; cursor: default; }
.shop-item .chest { --w: 60px; }
.shop-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.shop-txt b { font-size: 16px; text-shadow: 0 1.5px 0 var(--blue-dd); }
.shop-txt small { font-size: 11px; font-weight: 500; color: var(--muted); line-height: 1.2; }
.price { gap: 3px; padding: 6px 9px; font-size: 15px; }
#modal-text .tip { margin: 0; font-size: 13px; }
.deck-pips { display: flex; justify-content: center; gap: 3px; min-height: 7px; }
.deck-pips s { width: 7px; height: 7px; border-radius: 50%; background: var(--navy); box-shadow: 0 0 0 1px var(--blue-l); }
.deck-pips s.on { background: var(--gold); }

/* card detail popup */
#modal .box.wide { max-width: 380px; }
.cd { display: flex; gap: 16px; align-items: flex-start; text-align: left; }
.cd .card { width: 112px; flex: none; cursor: default; }
.cd-info { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cd-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.tag { font: 400 11px 'Lilita One', sans-serif; padding: 3px 7px; border-radius: 999px; background: var(--navy); color: #dde4ee; }
.tag.r-comum { color: #dfe4ee; } .tag.r-rara { color: #7fc4ff; } .tag.r-epica { color: #d9a8ff; }
.tag.lv-1 { color: #ffc28a; } .tag.lv-2 { color: #fff; background: #6b7a92; } .tag.lv-3 { color: var(--ink); background: var(--gold); }
.cd-desc { font-size: 15px; font-weight: 500; line-height: 1.25; white-space: normal; }
.cd-val { font: 400 14px 'Lilita One', sans-serif; color: var(--gold-d); }
.cd-next { font: 400 13px 'Lilita One', sans-serif; color: #1f9e4a; }
#cd-fuse { gap: 8px; } #cd-fuse small { font-size: 12px; opacity: .8; }
.cd-own { font-size: 14px; color: var(--muted); white-space: nowrap; } .cd-own b { color: var(--text); }
.cd-deck { display: flex; align-items: center; gap: 6px; margin-top: 12px; }
.cd-deck .btn { width: 46px; font-size: 16px; }
.cd-deck .label { flex: 1; text-align: center; }
.cd-buy { width: 100%; margin-top: 10px; }

/* ---------- map ---------- */
#areas { display: flex; flex-direction: column; gap: 6px; }
.area { display: flex; align-items: center; gap: 8px; padding: 6px; }
.area .thumb { width: 64px; height: 42px; flex: none; background: center / cover; padding: 0; }
.area .a-txt { flex: 1; min-width: 0; }
.area .a-txt b { display: block; font: 400 16px 'Lilita One', sans-serif; }
.area .a-txt small { font-size: 12px; color: var(--muted); }
.area .boss { width: 40px; height: 40px; display: grid; place-items: end center; flex: none; }
.area .boss img { max-width: 40px; max-height: 40px; }
.area.locked { opacity: .55; }
.area .pool { display: flex; gap: 3px; margin-top: 3px; align-items: flex-end; }
.area .pool img { height: 16px; max-width: 22px; object-fit: contain; }
.area .btn { padding: 9px 12px; }

/* ---------- evo tree ---------- */
#tree { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.t-node { display: flex; align-items: center; gap: 5px; padding: 3px 6px; margin: 1px; min-width: 0; border-radius: 10px; }
.t-node .sil { width: 34px; height: 30px; display: grid; place-items: end center; flex: none; }
.t-node img { max-height: 30px; max-width: 34px; }
.t-node b { font-size: 13px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-node > div:last-child { min-width: 0; }
.t-node.cur, .t-mega.cur { border-color: var(--gold); box-shadow: 0 3px 0 var(--gold-d), 0 0 0 2px var(--gold); }
.t-root { align-self: center; }
.t-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.t-col { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.t-line { display: flex; flex-direction: column; align-items: stretch; }
.t-line > .t-arr { display: none; }
.t-line .t-ults { margin-left: 14px; }
.t-line .t-ults .t-node { padding: 1px 6px; }
.t-pair { display: flex; align-items: center; min-width: 0; }
.t-pair > .t-node { flex: 1; min-width: 0; }
.t-pair > .t-node + .t-arr + .t-node::before, .t-pair .t-arr + .t-node::before { content: none; }
.t-pair .t-node .sil { width: 24px; height: 24px; } .t-pair .t-node img { max-height: 24px; max-width: 26px; }
.t-line .t-ults .t-pair .t-node::before { content: none; }
.t-mega { width: 36px; height: 32px; flex: none; display: grid; place-items: end center; margin: 1px; cursor: help; border-radius: 10px; }
.t-mega img { max-width: 30px; max-height: 28px; }
.t-line .t-ults .t-node::before { content: "▸"; font-size: 12px; color: var(--muted); }
.t-line > .t-node { flex: 1; }
.t-ults { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.t-arrow { font: 400 12px 'Lilita One', sans-serif; color: var(--muted); text-align: center; }
.t-arr { font-size: 11px; color: var(--muted); flex: none; }
.t-cond { font-size: 11px; font-weight: 500; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-fail { display: flex; align-items: center; gap: 2px; }
.t-fail > .t-node { flex: 1; }
#reset { align-self: center; margin-top: 4px; }

/* ---------- battle ---------- */
#battle { height: 100%; position: relative; }
.battle-info, .ram-row { padding: 0 2px; }
#ram { display: flex; gap: 5px; flex: 1; margin-left: 8px; }
#ram span { flex: 1; height: 14px; background: var(--navy); border: 2px solid var(--ink); border-radius: 999px; overflow: hidden; }
#ram span i { display: block; height: 100%; background: var(--ram); background-image: linear-gradient(#ffffff66 0 35%, transparent 35%); }
#ram span.full i { background-color: #9df0ff; }
#hand { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 2px; flex: 1; min-height: 110px; max-height: 240px; }
#hand .c-art { flex: 1; min-height: 0; }
#hand .c-art img { height: 100%; aspect-ratio: auto; }
#tip { position: absolute; left: 4px; right: 4px; bottom: 58px; padding: 10px 12px; z-index: 3; font-size: 14px; font-weight: 500;
       pointer-events: none; } /* só leitura: nunca pode engolir o toque numa carta embaixo dela */
#tip b { font: 400 14px 'Lilita One', sans-serif; color: var(--gold-d); display: block; margin-bottom: 3px; }
.b-btns { margin-top: auto; }
.b-btns .btn { flex: 1; }
.atb { padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.atb-row { display: flex; align-items: center; gap: 8px; }
.atb-row .label { width: 96px; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atb-bar { height: 10px; }
.atb-bar i { background-color: var(--ram); transition: none; }
.atb-bar.foe i { background-color: var(--atk); }
.atb-bar.ready i { background-color: var(--gold); }
.atb-stats { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); }
.atb-stats b { color: var(--text); font-weight: 700; }

/* ---------- modal ---------- */
#modal { position: fixed; inset: 0; background: #16223acc; display: grid; place-items: center; padding: 16px; z-index: 15; } /* confirmação por cima de qualquer painel */
#modal[hidden] { display: none; }
#modal .box { max-width: 340px; width: 100%; padding: 16px; display: flex; flex-direction: column; gap: 12px; border-radius: 20px; }
#modal-title { font-size: 22px; color: var(--gold-l); text-align: center; text-shadow: var(--outline); }
#modal-text { font-size: 16px; font-weight: 500; white-space: pre-line; text-align: center; }
#modal-text .res { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; text-align: left; font-size: 15px; }
#modal-text .res b { font: 400 16px 'Lilita One', sans-serif; color: var(--gold-d); align-self: center; }
.modal-btns .btn { flex: 1; }

/* ---------- battle juice ---------- */
/* auras come before the action animations so a lunge or hit flash still wins while it plays */
.mon.a-power { animation: aura-p .5s steps(2) infinite; }
@keyframes aura-p { 0%, 100% { filter: drop-shadow(2px 0 0 #ff5a4a) drop-shadow(-2px 0 0 #ff5a4a) drop-shadow(0 -2px 0 #ffd23f); }
                    50% { filter: drop-shadow(1px 0 0 #ff5a4a) drop-shadow(-1px 0 0 #ff5a4a) drop-shadow(0 -1px 0 #ff5a4a); } }
.mon.a-shield { filter: drop-shadow(2px 0 0 #4aa8ff) drop-shadow(-2px 0 0 #4aa8ff) drop-shadow(0 2px 0 #4aa8ff) drop-shadow(0 -2px 0 #4aa8ff); }
.mon.a-wing { filter: drop-shadow(4px 0 0 #bff4ff66) drop-shadow(8px 0 0 #bff4ff33); }
.mon.a-virus { animation: aura-v .6s steps(2) infinite; }
@keyframes aura-v { 50% { filter: sepia(1) hue-rotate(60deg) saturate(3); } }
.mon.lunge { animation: lunge .25s steps(3); }
.mon.lunge-r { animation: lunge-r .25s steps(3); }
.mon.shake { animation: shake .3s steps(4); }
.mon.jump { animation: jump .5s steps(5); }
.mon.dissolve { animation: dissolve .9s steps(9) forwards; }
@keyframes dissolve { 20% { filter: brightness(3) saturate(0); } 100% { filter: brightness(3) saturate(0); clip-path: inset(100% 0 0 0); } }
.mon.slam { animation: slam .45s steps(5); }
@keyframes slam { 0% { translate: -50% -70px; } 60% { translate: -50% 4px; } }
.mon.faint { animation: faint .7s steps(7) forwards; }
@keyframes faint { to { translate: -50% 10px; filter: grayscale(1) brightness(.5); opacity: 0; } }

.fx { position: absolute; translate: -50% -50%; pointer-events: none; }
.fx.bit { width: 4px; height: 4px; background: var(--c); animation: fx-bit .5s steps(6) forwards; }
@keyframes fx-bit { to { translate: calc(-50% + var(--dx)) calc(-50% + var(--dy)); opacity: 0; } }
.fx.rise, .fx.ember { width: 4px; height: 4px; background: var(--c, #ff9a3c); opacity: 0; animation: fx-rise .8s steps(8) forwards; }
.fx.ember { height: 6px; }
@keyframes fx-rise { 0% { opacity: 1; } 100% { translate: -50% calc(-50% - 36px); opacity: 0; } }
.fx.plus { width: 8px; height: 8px; opacity: 0; animation: fx-rise .9s steps(8) forwards;
  background: linear-gradient(var(--c), var(--c)) center / 8px 2px no-repeat, linear-gradient(var(--c), var(--c)) center / 2px 8px no-repeat; }
.fx.bubble { width: 6px; height: 6px; box-shadow: inset 0 0 0 1px var(--c); opacity: 0; animation: fx-rise 1s steps(8) forwards; }
.fx.ring { width: 12px; height: 12px; box-shadow: 0 0 0 2px var(--c); animation: fx-ring .42s steps(6) forwards; }
.fx.ring.big { animation: fx-ring-big .52s steps(7) forwards; }
@keyframes fx-ring { to { scale: 5; opacity: 0; } }
@keyframes fx-ring-big { to { scale: 9; opacity: 0; } }
.fx.slash { width: 96px; height: 4px; background: #fff; box-shadow: 0 0 0 1px #9fe9ff; rotate: -35deg; scale: 0 1; animation: fx-slash .42s steps(5) forwards; }
.fx.slash.b { rotate: 35deg; animation-delay: .08s; }
@keyframes fx-slash { 40% { scale: 1 1; opacity: 1; } 100% { scale: 1.1 .2; opacity: 0; } }
.fx.fireball { width: 12px; height: 12px; background: #ffd23f; animation: flick .1s steps(2) infinite;
  box-shadow: 0 0 0 2px #ff9a3c, 0 0 0 4px #ff5a4a, 8px 0 0 -1px #ff9a3c, 14px 0 0 -3px #ff5a4a; }
@keyframes flick { 50% { filter: brightness(1.5); } }
.fx.orb { width: 6px; height: 6px; background: var(--c); box-shadow: 0 0 0 1px #ffffff55; }
.fx.streak { width: 26px; height: 2px; background: #fff; opacity: 0; animation: fx-streak .45s steps(5) forwards; }
@keyframes fx-streak { 0% { opacity: 1; } 100% { translate: calc(-50% + 40px) -50%; opacity: 0; } }
.fx.bolt { width: 14px; height: 26px; background: #ffd23f; clip-path: polygon(40% 0, 100% 0, 60% 40%, 100% 40%, 20% 100%, 40% 55%, 0 55%);
           animation: flick .08s steps(2) infinite, fx-fade .52s steps(4) forwards; }
.fx.bolt.b { scale: -1 1; }
@keyframes fx-fade { 80% { opacity: 1; } 100% { opacity: 0; } }
.fx.data { width: 3px; height: 3px; background: #5ad1ff; opacity: 0; animation: fx-data 1s steps(10) forwards; }
.fx.data:nth-child(3n) { background: #fff; } .fx.data:nth-child(3n+1) { background: #4aa8ff; }
@keyframes fx-data { 0% { opacity: 1; } 100% { translate: -50% calc(-50% - 56px); opacity: 0; } }

#wall { position: absolute; left: 204px; bottom: 22px; width: 8px; height: 86px; opacity: .85; animation: flick .15s steps(2) infinite;
        background: repeating-linear-gradient(0deg, #ff5a4a 0 4px, #ff9a3c 4px 8px); box-shadow: 0 0 0 2px #ffd23f55; }

#scene.shake-s { animation: sh-s .2s steps(4); }
@keyframes sh-s { 25% { translate: 3px 0; } 50% { translate: -3px 1px; } 75% { translate: 2px -1px; } }
#scene.shake-m { animation: sh-m .3s steps(6); }
@keyframes sh-m { 20% { translate: 5px 0; } 40% { translate: -5px 2px; } 60% { translate: 4px -2px; } 80% { translate: -3px 0; } }
#scene.shake-l { animation: sh-l .5s steps(8); }
@keyframes sh-l { 15% { translate: 8px 0; rotate: 1deg; } 30% { translate: -8px 3px; rotate: -1deg; } 50% { translate: 6px -3px; } 70% { translate: -5px 2px; } 85% { translate: 3px 0; } }

#flash-soft { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
#flash-soft.on { animation: fsoft .18s steps(2); }
@keyframes fsoft { 0% { opacity: .7; } 100% { opacity: 0; } }

/* stage overlays (screen pixels, not scaled): VHS scanlines, hurt vignette, wipes, banners, boss cut-in */
#stage::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 4;
                background: repeating-linear-gradient(0deg, #0000 0 2px, #0000001f 2px 3px); }
#hurt { position: absolute; inset: 0; pointer-events: none; z-index: 3; opacity: 0;
        background: radial-gradient(ellipse at center, #0000 45%, #ff1e1e8c 100%); box-shadow: inset 0 0 0 4px #ff3b3b; }
#hurt.on { animation: hurt .45s steps(4); }
@keyframes hurt { 0%, 40% { opacity: 1; } 100% { opacity: 0; } }

#wipe { position: absolute; inset: 0; display: grid; grid-template-rows: repeat(8, 1fr); pointer-events: none; z-index: 6; }
#wipe i { background: var(--blue-dd); scale: 0 1; transform-origin: 0 50%; }
#wipe.in i { animation: blind-in .3s steps(5) forwards; }
#wipe.out i { scale: 1 1; transform-origin: 100% 50%; animation: blind-out .3s steps(5) forwards; }
#wipe i:nth-child(2) { animation-delay: 25ms; } #wipe i:nth-child(3) { animation-delay: 50ms; } #wipe i:nth-child(4) { animation-delay: 75ms; }
#wipe i:nth-child(5) { animation-delay: 100ms; } #wipe i:nth-child(6) { animation-delay: 125ms; } #wipe i:nth-child(7) { animation-delay: 150ms; }
#wipe i:nth-child(8) { animation-delay: 175ms; }
@keyframes blind-in { to { scale: 1 1; } }
@keyframes blind-out { to { scale: 0 1; } }

#banner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
          z-index: 7; pointer-events: none; }
#banner .b-main { font-size: 34px; color: var(--gold-l); text-shadow: var(--outline); animation: pop .5s cubic-bezier(.34, 1.56, .64, 1); }
#banner .b-sub { font: 400 22px 'Lilita One', sans-serif; color: #fff; text-shadow: var(--outline); animation: pop .5s .1s cubic-bezier(.34, 1.56, .64, 1) backwards; }
#banner.boss .b-main { color: #ff6b5e; }
@keyframes pop { from { scale: .2; opacity: 0; } }

#bosscut { position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column; justify-content: center; gap: 8px;
           background: #16223ad9; overflow: hidden; pointer-events: none; animation: fade-in .2s steps(3); }
#bosscut.out { animation: fade-out .3s steps(3) forwards; }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
.warn { height: 24px; display: flex; align-items: center; overflow: hidden;
        background: repeating-linear-gradient(-45deg, #ffd23f 0 10px, var(--ink) 10px 20px); }
.warn span { font: 400 13px 'Lilita One', sans-serif; color: #fff; background: #ff3b3b; padding: 2px 8px; white-space: nowrap; animation: marquee 2.4s linear infinite; }
.warn.rev span { animation-direction: reverse; }
@keyframes marquee { from { translate: 60% 0; } to { translate: -60% 0; } }
.bc-body { display: flex; align-items: center; gap: 14px; padding: 10px 16px; background: linear-gradient(90deg, #8a1830, #1f2b40);
           box-shadow: 0 3px 0 var(--ink), 0 -3px 0 var(--ink); animation: slide-in .45s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes slide-in { from { translate: 110% 0; } }
.bc-img { width: 100px; height: 100px; flex: none; display: grid; place-items: center; background: var(--ink); border-radius: 14px; box-shadow: inset 0 0 0 3px #ff3b3b; }
.bc-img img { max-width: 92px; max-height: 92px; scale: -1 1; image-rendering: pixelated; animation: sil 1s steps(1) forwards; }
@keyframes sil { 0%, 55% { filter: brightness(0); } 56% { filter: brightness(3); } 70%, 100% { filter: none; } }
.bc-sub { font-size: 13px; color: #ff8a80; }
.bc-name { font-size: 26px; color: #fff; text-shadow: var(--outline); margin: 4px 0; }
.bc-lv { font-size: 15px; color: var(--gold-l); }

/* ---------- egg picker: pick, details, hatch, name ---------- */
#eggs { position: fixed; inset: 0; z-index: 11; display: grid; place-items: center; padding: 14px; overflow: hidden;
        background: radial-gradient(circle at 50% 35%, #56749c, #1e2e45 72%); }
.eg-rays { position: absolute; left: 50%; top: 35%; width: 170vmax; height: 170vmax; translate: -50% -50%; pointer-events: none; opacity: .18;
           background: repeating-conic-gradient(#ffe070 0 7deg, transparent 7deg 20deg); animation: rays 30s linear infinite;
           mask: radial-gradient(circle, #000, transparent 60%); -webkit-mask: radial-gradient(circle, #000, transparent 60%); }
.eg-box { position: relative; width: 100%; max-width: 400px; max-height: 100%; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; text-align: center; }
#eggs-title { font-size: 26px; color: var(--gold-l); line-height: 1.15; text-shadow: var(--outline); }
#egg-pick { display: flex; flex-direction: column; gap: 12px; }
#egg-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.egg-opt { position: relative; aspect-ratio: 1; display: grid; place-items: center; padding: 0; cursor: pointer; border-radius: 16px;
           background: radial-gradient(circle at 50% 60%, #ffffff55, #34496a 70%); border: 3px solid var(--ink); box-shadow: 0 3px 0 var(--ink); }
.egg-opt img { width: 70%; image-rendering: pixelated; filter: drop-shadow(0 3px 0 #0005); }
.egg-opt.on { border-color: var(--gold-d); box-shadow: 0 3px 0 var(--gold-d), 0 0 0 3px var(--gold), 0 0 16px #ffe070; background: radial-gradient(circle at 50% 60%, #fff8, #5d7ba3 70%); }
.egg-opt.on img { animation: egg-bob .8s ease-in-out infinite; }
@keyframes egg-bob { 50% { translate: 0 -4px; rotate: -4deg; } }
.egg-opt:not(.locked):active { translate: 0 2px; }
.egg-opt.locked { cursor: default; } .egg-opt.locked img { filter: brightness(0) opacity(.45); }
.egg-lock { position: absolute; right: 3px; bottom: 3px; }
.eg-info { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.eg-info > b { font-size: 18px; color: var(--ink); }
.eg-baby { display: flex; align-items: center; gap: 10px; }
.eg-baby img { width: 48px; height: 48px; object-fit: contain; image-rendering: pixelated; }
.eg-baby span { display: flex; flex-direction: column; font-size: 15px; } .eg-baby small { color: var(--muted); font-size: 12px; }
.eg-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.eg-line > small { width: 100%; font-size: 12px; color: var(--muted); }
.eg-line span { display: flex; align-items: center; gap: 4px; font-size: 13px; }
.eg-line img { width: 34px; height: 34px; object-fit: contain; image-rendering: pixelated; }
#egg-hatch { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.hatch-stage { position: relative; width: 200px; height: 170px; display: grid; place-items: end center; }
.hatch-stage::before { content: ''; position: absolute; inset: 10% 5%; border-radius: 50%; background: radial-gradient(circle, #ffe07088, transparent 65%); }
#hatch-egg { position: relative; width: 110px; image-rendering: pixelated; filter: drop-shadow(0 5px 0 #0006); }
.hatch-stage.shake #hatch-egg { animation: hatch-shake .5s ease-in-out; }
@keyframes hatch-shake { 20% { rotate: calc(var(--k, 1) * -6deg); } 40% { rotate: calc(var(--k, 1) * 6deg); } 60% { rotate: calc(var(--k, 1) * -4deg); } 80% { rotate: calc(var(--k, 1) * 3deg); } }
#hatch-img { position: relative; image-rendering: pixelated; animation: pop .6s cubic-bezier(.34, 1.56, .64, 1); }
.hatch-flash { position: absolute; inset: -40px; border-radius: 50%; background: radial-gradient(circle, #fff, #ffe070aa 40%, transparent 70%); opacity: 0; pointer-events: none; }
.hatch-stage.pop .hatch-flash { animation: hatch-flash .8s ease-out; }
@keyframes hatch-flash { 0% { opacity: 1; scale: .3; } 100% { opacity: 0; scale: 1.6; } }
#hatch-name { font-size: 22px; color: #fff; line-height: 1.3; text-shadow: var(--outline); }
#hatch-form { width: 100%; max-width: 320px; display: flex; flex-direction: column; gap: 10px; }
#hatch-form label { display: flex; flex-direction: column; gap: 5px; font: 400 15px 'Lilita One', sans-serif; color: #fff; text-shadow: 0 1.5px 0 var(--ink); }

/* ---------- signature attack ---------- */
.fx.beam { height: 10px; background: linear-gradient(var(--c2), var(--c2)) center / 100% 4px no-repeat, var(--c);
           box-shadow: 0 0 0 2px var(--c); scale: 0 1; animation: fx-beam .52s steps(6) forwards; }
@keyframes fx-beam { 30% { scale: 1 1; } 80% { scale: 1 1.6; opacity: 1; } 100% { scale: 1 0; opacity: 0; } }
.fx.orb.big { width: 10px; height: 10px; box-shadow: 0 0 0 2px #ffffff66; }
#special { position: absolute; inset: 0; z-index: 8; display: flex; align-items: center; pointer-events: none; overflow: hidden;
           background: #16223ab0; animation: fade-in .15s steps(2); }
#special.out { animation: fade-out .25s steps(3) forwards; }
.sp-band { width: 100%; display: flex; align-items: center; gap: 14px; padding: 12px 16px;
           background: linear-gradient(90deg, #283c58, #56749c 60%, #ffc21a66);
           box-shadow: 0 3px 0 var(--ink), 0 -3px 0 var(--ink), 0 6px 0 var(--gold), 0 -6px 0 var(--gold);
           animation: slide-in-l .35s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes slide-in-l { from { translate: -110% 0; } }
.sp-img { width: 84px; height: 84px; display: grid; place-items: center; flex: none; }
.sp-img img { max-width: 84px; max-height: 84px; image-rendering: pixelated; }
.sp-sub { font-size: 13px; color: var(--gold-l); }
.sp-name { font-size: 24px; color: #fff; text-shadow: var(--outline); margin-top: 4px; line-height: 1.2; }

/* special button: fills up like a gauge, glows when ready */
#retreat.fleeing { background: linear-gradient(#ff7a6e, #d8382c); border-color: #7a1810; box-shadow: 0 3px 0 #7a1810;
                   animation: pulse .5s ease-in-out infinite alternate; }
#special-btn { position: relative; overflow: hidden; }
#special-btn .fill { position: absolute; left: 0; top: 0; bottom: 0; background: #ffe07066; pointer-events: none; }
#special-btn span { position: relative; }
#special-btn.ready { --text: #5a3200; background: linear-gradient(var(--gold-l), var(--gold)); border-color: var(--gold-d); text-shadow: none;
                     animation: pulse .5s ease-in-out infinite alternate; }

/* type advantage in the battle panel */
.type-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); }
.type-row b.up { color: #1f9e4a; } .type-row b.down { color: #d43a2c; }
.float.super { color: #ff9a3c; font-size: 16px; } .float.weak { color: #c3cfe0; }

/* short screens: tighten */
@media (max-height: 700px) {
  #top { padding: 5px 6px; } .pill { height: 34px; } .pill b { font-size: 16px; } .pill .plus { width: 26px; height: 26px; }
  .pill.sq { width: 34px; } #top-title { height: 36px; }
  #content { padding-top: 10px; } #content > section { gap: 6px; }
  #pet-card { padding: 5px; gap: 8px; }
  .portrait { width: 72px; } .portrait img { width: 52px; height: 52px; } .portrait .attr { width: 24px; height: 24px; }
  .portrait .attr svg { width: 18px; height: 18px; }
  #pet-name { font-size: 20px; } .lv-badge { font-size: 16px; padding: 2px 9px 3px; }
  .pet-id { gap: 1px; } #pet-meta { font-size: 12px; } .bar { height: 10px; } .bar-l svg { width: 17px; height: 17px; }
  .care-tags { font-size: 11px; margin-top: -5px; line-height: 1; }
  .evo-opt .sil { height: 32px; }
  .act { padding: 5px 2px; } .act > span:not(.badge) { font-size: 11px; }
  .evo-head { margin-bottom: 5px; } .evo-tab { font-size: 14px; padding: 4px 18px 4px 8px; } #evo-lv { font-size: 14px; }
  .evo-opt .sil { height: 32px; } .evo-opt .sil img { max-height: 28px; } .evo-opt b { font-size: 14px; margin-top: 1px; }
  .evo-opt em { font-size: 13px; } .evo-opt .reqs span { font-size: 11px; }
  .tip, .area .pool, .t-cond { display: none; }
  .st-row { padding: 2px 8px; } .st-row .st-name small { display: none; } .st-row .btn { padding: 5px 7px; }
  #collection .c-name { height: 2em; font-size: 11px; } #collection .card { margin: 4px 3px; }
  .area { padding: 3px 6px; } .area .thumb { height: 30px; } .area .boss, .area .boss img { max-height: 30px; height: 30px; }
  #tree { gap: 3px; } .t-node .sil { height: 26px; } .t-node img { max-height: 26px; }
  #tree > .label, section[data-tab="evo"] > .label { display: none; }
  .t-node { padding: 1px 5px; }
  .t-col > .t-arrow { display: none; }
  .dp-card { padding: 3px 10px; } .dp-card svg { width: 30px; height: 30px; } .chip-tab { padding: 3px 2px; } .chip-tab svg { width: 20px; height: 20px; }
  #chips { gap: 5px; } .chip-txt small.next { display: none; }
  .dp-card p { display: none; } .dp-num b { font-size: 24px; } .chip-row { padding: 4px 8px; } .chip-ic { width: 40px; height: 40px; }
  .chip-ic svg { width: 24px; height: 24px; } #chips::before { left: 26px; } .chip-row { grid-template-columns: 40px 1fr auto; }
  #nav { padding: 4px 5px 5px; gap: 4px; } #nav button { padding: 2px 0 2px; } #nav svg { width: 22px; height: 22px; } #nav span { font-size: 10px; }
  .nav-ic { width: 28px; height: 28px; } .act-ic { width: 28px; height: 28px; } .act { padding: 5px 2px 4px; }
}

/* ---------- chests: CSS-drawn, sized by --w ---------- */
.chest { --w: 150px; --wood: #a8622d; --wood2: #7a4219; --metal: #e0a86a; --metal2: #9a6232; position: relative;
         width: var(--w); height: calc(var(--w) * .82); flex: none; }
.ch-bronze { --wood: #b0703a; --wood2: #7a4219; --metal: #e8b27a; --metal2: #9a6232; }
.ch-prata { --wood: #5c78a3; --wood2: #3a5070; --metal: #eef3fa; --metal2: #8d9bb0; }
.ch-ouro { --wood: #b8452f; --wood2: #7a2418; --metal: #ffd23f; --metal2: #c77a00; }
.ch-chefe { --wood: #5a2a7e; --wood2: #33144d; --metal: #ffd23f; --metal2: #c77a00; }
.ch-lid, .ch-body { position: absolute; left: 0; right: 0; border: calc(var(--w) * .025 + 1px) solid var(--ink);
  background: linear-gradient(90deg, transparent 14%, var(--metal) 14% 24%, transparent 24% 76%, var(--metal) 76% 86%, transparent 86%),
              linear-gradient(var(--wood), var(--wood2)); }
.ch-lid { top: 0; height: 42%; border-radius: 48% 48% 10% 10% / 70% 70% 10% 10%; transform-origin: 8% 100%; z-index: 2;
          box-shadow: inset 0 calc(var(--w) * -.05) 0 var(--metal2), inset 0 3px 0 #ffffff40; transition: rotate .35s cubic-bezier(.34, 1.56, .64, 1), translate .35s; }
.ch-body { bottom: 0; height: 62%; border-radius: 6% 6% 14% 14%; box-shadow: inset 0 calc(var(--w) * .05) 0 var(--metal2), inset 0 -4px 0 #0000004d; }
.ch-lock { position: absolute; left: 50%; top: -14%; translate: -50% 0; width: 22%; height: 34%; border-radius: 22%; z-index: 3;
           background: linear-gradient(var(--metal), var(--metal2)); border: calc(var(--w) * .02 + 1px) solid var(--ink); }
.ch-lock::after { content: ''; position: absolute; left: 50%; top: 30%; translate: -50% 0; width: 22%; height: 40%; border-radius: 40% 40% 20% 20%; background: var(--ink); }
.ch-light { position: absolute; left: 10%; right: 10%; top: 28%; height: 20%; border-radius: 50%; z-index: 1; opacity: 0;
            background: radial-gradient(ellipse at 50% 100%, #fff, var(--glow, #fff) 45%, transparent 72%); }

/* ---------- reveal overlay (chest opening / fusion) ---------- */
#reveal { --k: 0; --glow: #fff; position: fixed; inset: 0; z-index: 12; display: flex; flex-direction: column; align-items: center; justify-content: center;
          gap: 14px; padding: 20px; overflow: hidden; background: radial-gradient(circle at 50% 45%, #2c4262, #16223a 70%); }
.rv-rays { position: absolute; left: 50%; top: 45%; width: 180vmax; height: 180vmax; translate: -50% -50%; pointer-events: none;
           opacity: calc(.12 + var(--k) * .4); transition: opacity .3s;
           background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--glow) 55%, transparent) 0 8deg, transparent 8deg 22deg);
           mask: radial-gradient(circle, #000 0, transparent 55%); -webkit-mask: radial-gradient(circle, #000 0, transparent 55%);
           animation: rays 12s linear infinite; }
@keyframes rays { to { rotate: 360deg; } }
#rv-title { position: relative; font-size: 28px; color: var(--gold-l); text-shadow: var(--outline); }
.rv-stage { position: relative; width: 260px; height: 300px; display: grid; place-items: end center; perspective: 700px; }
.rv-glow { position: absolute; left: 50%; bottom: 40px; width: 240px; height: 240px; translate: -50% 0; border-radius: 50%; pointer-events: none;
           background: radial-gradient(circle, var(--glow), transparent 65%); opacity: calc(.15 + var(--k) * .75);
           scale: calc(.5 + var(--k) * .7); transition: scale .25s, opacity .25s, background .3s; animation: glow-pulse .8s ease-in-out infinite alternate; }
@keyframes glow-pulse { to { filter: brightness(1.3); } }
#rv-chest { position: relative; z-index: 2; padding-bottom: 10px; cursor: pointer; transform-style: preserve-3d;
            animation: wobble calc(1s - var(--k) * .7s) ease-in-out infinite alternate; }
@keyframes wobble { from { rotate: calc(var(--k) * -7deg); } to { rotate: calc(var(--k) * 7deg); } }
.ch-tap { animation: ch-tap .42s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes ch-tap { 0% { transform: rotateY(0) scale(1); } 45% { transform: rotateY(200deg) scale(calc(1.12 + var(--k) * .25)) translateY(-18px); }
                    100% { transform: rotateY(360deg) scale(1); } }
#rv-fx { position: absolute; left: 50%; bottom: 80px; pointer-events: none; z-index: 3; }
#rv-fx i { position: absolute; width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 6px 1px #fff8; animation: spark .65s ease-out forwards; }
@keyframes spark { to { translate: var(--dx) var(--dy); scale: .2; opacity: 0; } }
#rv-hint { position: relative; font-size: 20px; color: #fff; text-shadow: var(--outline); display: flex; flex-direction: column; align-items: center; gap: 8px;
           min-height: 50px; animation: hint-bob .7s ease-in-out infinite alternate; }
@keyframes hint-bob { to { translate: 0 -4px; } }
.rv-dots { display: flex; gap: 6px; }
.rv-dots s { width: 12px; height: 12px; border-radius: 50%; background: #ffffff33; border: 2px solid var(--ink); }
.rv-dots s.on { background: var(--glow); box-shadow: 0 0 8px var(--glow); }
.rv-card { position: absolute; left: 50%; bottom: 60px; width: 140px; translate: -50% 0; z-index: 4; opacity: 0; pointer-events: none; perspective: 800px; }
.rv-flip { position: relative; transform-style: preserve-3d; transform: rotateY(180deg); }
.rv-flip > * { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
#rv-front .card { width: 100%; margin: 0; cursor: default; }
.rv-back { position: absolute; inset: 0; transform: rotateY(180deg); border-radius: 12px;
           border: 3px solid var(--gold); box-shadow: 0 0 0 2px var(--ink); image-rendering: pixelated;
           background: #16223a url(assets/cards/cardback.png?v=114) center/cover; }
#rv-info { position: relative; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; min-height: 30px; text-align: center; }
#rv-info b { width: 100%; font-size: 22px; color: #fff; text-shadow: var(--outline); }
.rv-new, .rv-fuse { font-size: 14px; padding: 2px 10px; border-radius: 999px; color: var(--ink); background: var(--gold); animation: pop .4s cubic-bezier(.34, 1.56, .64, 1); }
.rv-fuse { background: #8dffa8; }
.rv-have { font-size: 13px; color: var(--muted); }
#rv-ok { position: relative; max-width: 260px; animation: pop .35s cubic-bezier(.34, 1.56, .64, 1); }
.rv-flash { position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 5; }

#reveal.open #rv-chest { animation: none; cursor: default; }
#reveal.open .ch-lid { rotate: -32deg; translate: -6% -40%; }
#reveal.open .ch-light { animation: light-up 1.2s ease-out forwards; }
@keyframes light-up { 15% { opacity: 1; scale: 1.6 3; } 100% { opacity: .7; scale: 1.2 1.6; } }
#reveal.open .rv-flash { animation: rv-flash .5s ease-out; }
@keyframes rv-flash { 0% { opacity: .85; } 100% { opacity: 0; } }
#reveal.open .rv-rays { opacity: .5; }
#reveal.open .rv-glow { scale: 1.4; opacity: 1; }
#reveal.open .rv-card { animation: rv-rise .7s .15s cubic-bezier(.34, 1.56, .64, 1) forwards; }
@keyframes rv-rise { 0% { opacity: 1; translate: -50% 120px; scale: .2; } 100% { opacity: 1; translate: -50% 0; scale: 1; } }
#reveal.open .rv-flip { animation: rv-flip .6s .8s ease-in-out forwards; }
@keyframes rv-flip { to { transform: rotateY(0); } }
#reveal.open #rv-chest .chest { animation: chest-down .5s .3s ease-in forwards; }
@keyframes chest-down { to { translate: 0 40px; opacity: .35; scale: .8; } }

/* fusion: three copies spin into the middle, then the upgraded card flips in */
#reveal.fusion #rv-chest { animation: none; cursor: default; }
.rv-trio { position: relative; width: 240px; height: 170px; }
.rv-trio .card { position: absolute; top: 0; width: 76px; margin: 0; cursor: default; animation: trio 1.1s ease-in forwards; }
.rv-trio .card:nth-child(1) { left: 0; --tx: 82px; rotate: -12deg; }
.rv-trio .card:nth-child(2) { left: 82px; --tx: 0px; top: -14px; }
.rv-trio .card:nth-child(3) { left: 164px; --tx: -82px; rotate: 12deg; }
@keyframes trio { 60% { translate: var(--tx) 10px; rotate: 0deg; scale: .9; } 100% { translate: var(--tx) 10px; rotate: 720deg; scale: .1; opacity: 0; } }
#reveal.fusion.open .rv-trio { display: none; }

/* ---------- login ---------- */
/* ---------- login / criação de conta: paisagem do mundo digital, emblema e cartão ---------- */
#auth { position: fixed; inset: 0; z-index: 13; display: grid; place-items: center; padding: 14px; overflow: hidden; }
.auth-bg { position: absolute; inset: -6%; background: #111a2e url(assets/ui/authbg.png?v=114) center/cover no-repeat; image-rendering: pixelated;
           animation: bg-drift 48s ease-in-out infinite alternate; }
.auth-bg::after { content: ''; position: absolute; inset: 0;
                  background: linear-gradient(#0b12264d, #0b122699 55%, #070c18d9 100%); }
@keyframes bg-drift { from { transform: scale(1.05) translate3d(0, 0, 0); } to { transform: scale(1.14) translate3d(-1.5%, -2.5%, 0); } }
#auth .box { position: relative; z-index: 1; width: 100%; max-width: 350px; padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 11px;
            border-radius: 22px; max-height: calc(100dvh - 24px); overflow-y: auto; scrollbar-width: none; }
.auth-brand { display: flex; flex-direction: column; align-items: center; }
/* a marca entra com um pop e depois fica flutuando */
.auth-mark { width: min(210px, 30vh); height: auto; margin-bottom: 2px; filter: drop-shadow(0 8px 12px #0009);
             animation: auth-pop .55s cubic-bezier(.34, 1.56, .64, 1) backwards, auth-float 4.2s .55s ease-in-out infinite; }
@keyframes auth-pop { from { opacity: 0; scale: .35; rotate: -14deg; } }
@keyframes auth-float { 50% { translate: 0 -7px; } }
.auth-tag { font-size: 12px; color: #c8d3e3; text-align: center; }
/* abas com a pastilha dourada deslizando de uma pra outra */
.auth-tabs { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: 100%; padding: 3px; border-radius: 999px;
             background: #16223a99; border: 2px solid var(--blue-dd); }
.auth-ink { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 999px;
            background: linear-gradient(var(--gold-l), var(--gold)); box-shadow: 0 2px 0 var(--gold-d);
            transition: translate .24s cubic-bezier(.34, 1.56, .64, 1); }
#auth.register .auth-ink { translate: 100% 0; }
.auth-tabs .chip { position: relative; z-index: 1; justify-content: center; padding: 7px 0; border: 0; background: none;
                   font: 400 13px 'Lilita One', sans-serif; color: #cdd8e8; }
.auth-tabs .chip.on { color: #5a3200; }
#auth-form > * { animation: auth-in .3s ease-out backwards; }
#auth-form > :nth-child(1) { animation-delay: .12s } #auth-form > :nth-child(2) { animation-delay: .17s }
#auth-form > :nth-child(3) { animation-delay: .22s } #auth-form > :nth-child(4) { animation-delay: .27s }
#auth-form > :nth-child(5) { animation-delay: .32s } #auth-form > :nth-child(6) { animation-delay: .37s }
#auth-form > :nth-child(7) { animation-delay: .42s } #auth-form > :nth-child(8) { animation-delay: .47s }
@keyframes auth-in { from { opacity: 0; translate: 0 12px; } }
#auth.err .box { animation: auth-shake .34s ease-in-out; }
@keyframes auth-shake { 25% { translate: -9px 0; } 60% { translate: 7px 0; } 85% { translate: -3px 0; } }
#auth.err #auth-err { animation: pulse2 .5s ease-in-out infinite alternate; }
.auth-foot { font-size: 11px; color: #8fa0b8; text-align: center; }
.auth-foot a { color: var(--gold-l); }
#auth-form { width: 100%; display: flex; flex-direction: column; gap: 10px; }
#auth-form label { display: flex; flex-direction: column; gap: 4px; font: 400 14px 'Lilita One', sans-serif; color: var(--ink); }
#auth-form input { font: 600 17px 'Fredoka', sans-serif; padding: 10px 12px; border-radius: 12px; border: 2px solid var(--blue-d); background: #fff;
                   color: var(--ink); user-select: text; -webkit-user-select: text; outline: none; }
#auth-form input:focus { border-color: var(--gold-d); box-shadow: 0 0 0 3px #ffc21a55; }
#auth-err { margin: 0; min-height: 1.2em; font-size: 14px; color: #c62c3c; text-align: center; }
.account { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 6px; font-size: 13px; color: var(--muted); }
.account b { color: #fff; }
.account .btn { padding: 6px 12px; font-size: 12px; }

/* ---------- PvP ---------- */
#pvp { position: fixed; inset: 0; z-index: 12; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 20px;
       background: linear-gradient(115deg, #8a1830 0 49.5%, #ffd23f 49.5% 50.5%, #1e2e45 50.5%); }
#pvp-title { font-size: 30px; color: var(--gold-l); text-shadow: var(--outline); }
.pvp-vs { display: flex; align-items: center; gap: 10px; }
.pvp-side { width: 130px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.pvp-side b { font-size: 17px; color: #fff; text-shadow: var(--outline); max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.pvp-side small { font-size: 12px; color: #fff; opacity: .85; }
.pvp-img { width: 110px; height: 110px; display: grid; place-items: end center; border-radius: 50%; background: radial-gradient(circle, #ffffff33, transparent 70%); }
.pvp-img img { width: 96px; height: 96px; object-fit: contain; object-position: bottom; }
#pvp-you .pvp-img img { scale: -1 1; } /* battle sprites face left; yours looks at the foe */
.pvp-img span { font-size: 60px; color: #fff; opacity: .5; align-self: center; }
#pvp.searching #pvp-foe .pvp-img { animation: glow-pulse .6s ease-in-out infinite alternate; }
#pvp.matched #pvp-foe { animation: slide-in .45s cubic-bezier(.34, 1.56, .64, 1); }
.pvp-x { font-size: 40px; color: var(--gold-l); text-shadow: var(--outline); animation: pop .5s cubic-bezier(.34, 1.56, .64, 1); }
#pvp-status { min-height: 2.6em; max-width: 300px; font-size: 15px; color: #fff; text-align: center; text-shadow: 0 1.5px 0 var(--ink); }
#pvp .btn { max-width: 280px; }

/* ---------- attribute (type) popup ---------- */
.at-box { display: flex; flex-direction: column; align-items: center; gap: 8px; white-space: normal; }
.at-big { width: 84px; height: 84px; display: grid; place-items: center; border-radius: 50%; background: #fff; border: 3px solid var(--ink); box-shadow: 0 3px 0 var(--ink); }
.at-box p { margin: 0; font-size: 15px; }
.at-row { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; padding: 7px 8px; border-radius: 12px;
          font: 400 15px 'Lilita One', sans-serif; background: #ece6d8; }
.at-row small { width: 100%; font: 500 12px 'Fredoka', sans-serif; color: var(--muted); }
.at-row.good { background: #d8f5df; color: #1f7a3a; } .at-row.bad { background: #fbdcdc; color: #a3243a; }
.at-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 3px; border-radius: 999px; background: #fff; border: 2px solid var(--ink); color: var(--ink); }
.at-cycle { display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.at-cycle span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: #fff; border: 2px solid #c9cfdb; opacity: .7; }
.at-cycle span.cur { border-color: var(--gold-d); box-shadow: 0 0 0 3px #ffc21a66; opacity: 1; }
.at-arr { font-size: 12px; color: var(--muted); }
.at-note { font-size: 12px; color: var(--muted); }

/* ---------- party slots (top-left of the arena, below the header) ---------- */
#party { position: absolute; left: 8px; top: calc(var(--top-h, 54px) + 4px); z-index: 5; display: flex; gap: 6px; }
.slot { position: relative; width: 44px; height: 44px; padding: 0; display: grid; place-items: center; border-radius: 50%; cursor: pointer; overflow: visible;
        background: radial-gradient(circle at 40% 35%, #7f9cc4, #34496a); border: 2px solid var(--ink); box-shadow: 0 3px 0 var(--ink); color: #fff; }
.slot img { width: 38px; height: 38px; object-fit: contain; border-radius: 50%; }
.slot span { position: absolute; bottom: -7px; left: 50%; translate: -50% 0; font: 400 10px 'Lilita One', sans-serif; padding: 0 5px; border-radius: 999px;
             background: var(--ink); color: #fff; white-space: nowrap; }
.slot.on { border-color: var(--gold-d); box-shadow: 0 3px 0 var(--gold-d), 0 0 0 3px var(--gold), 0 0 10px #ffe070; }
.slot.on span { background: var(--gold); color: var(--ink); }
.slot.empty { background: #1f2b40aa; border-style: dashed; border-color: #ffffffaa; animation: pulse2 .8s ease-in-out infinite alternate; }
.slot.locked { background: #1f2b4088; opacity: .75; }
.slot:active { translate: 0 2px; box-shadow: 0 1px 0 var(--ink); }
.slot.dot::after { content: ''; position: absolute; top: -3px; right: -3px; width: 12px; height: 12px; border-radius: 50%;
                   background: var(--atk); border: 2px solid #fff; animation: pulse2 .6s ease-in-out infinite alternate; }
#eggs-cancel { align-self: center; }
@media (max-height: 700px) { .slot { width: 36px; height: 36px; } .slot img { width: 30px; height: 30px; } #party { gap: 5px; } }

/* ---------- arena corner: rest bonus + prizes ---------- */
#corner { position: absolute; right: 8px; top: calc(var(--top-h, 54px) + 4px); z-index: 5; display: flex; align-items: center; gap: 6px; }
.rest-chip { display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px 3px 4px; border-radius: 999px; cursor: pointer;
             font: 400 13px 'Lilita One', sans-serif; color: #fff; background: #1f2b40cc; border: 2px solid #ffe07099; }
.rest-chip b { font-weight: 400; color: var(--gold-l); }
.rest-chip small { font-size: 11px; color: #c8d3e3; }
.rest-chip:active { translate: 0 2px; }
.rest-num { display: flex; align-items: baseline; gap: 2px; font: 400 28px/1 'Lilita One', sans-serif; color: var(--gold-d); }
.rest-num span { font-size: 17px; color: var(--muted); }
.rest-bar { width: 100%; flex: none; height: 14px; }
.rest-bar i { background-color: var(--gold); }
.rest-tiers { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.rest-tiers span { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: #ece6d8;
                   color: var(--muted); font: 400 12px 'Lilita One', sans-serif; }
.rest-tiers b { font-weight: 400; color: var(--ink); }
.rest-tiers .cur { background: var(--gold); color: #5a3200; box-shadow: 0 0 0 2px #ffe07099; }
.rest-tiers .cur b { color: #5a3200; }
.gift { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0; padding: 3px 6px 2px; cursor: pointer; border-radius: 14px;
        background: linear-gradient(#ff8fa3, #d8385a); border: 2px solid #7a1830; box-shadow: 0 3px 0 #7a1830, inset 0 2px 0 #ffffff66; color: #fff; }
.gift span { font-size: 10px; text-shadow: 0 1.5px 0 #7a1830; }
.gift:active { translate: 0 2px; box-shadow: 0 1px 0 #7a1830; }
.gift.dot::after, .dl-tabs .chip.dot::after { content: ''; position: absolute; top: -4px; right: -4px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--atk); border: 2px solid #fff; animation: pulse2 .6s ease-in-out infinite alternate; }
.gift.dot { animation: gift-bob 1s ease-in-out infinite; }
@keyframes gift-bob { 50% { translate: 0 -3px; rotate: -4deg; } }
.battle-info .rest-chip { margin-left: auto; margin-right: 6px; padding: 3px 8px 3px 4px; }

/* ---------- prizes panel ---------- */
#daily { position: fixed; inset: 0; z-index: 11; display: grid; place-items: center; padding: 12px; background: #16223acc; }
.dl-box { position: relative; width: 100%; max-width: 420px; max-height: calc(100dvh - 24px); display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 20px; }
.dl-head { display: flex; justify-content: space-between; align-items: center; }
.dl-head b { font-size: 26px; color: var(--gold-l); text-shadow: var(--outline); }
.dl-x { width: 38px; height: 38px; padding: 0; font-size: 18px; }
.dl-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.dl-tabs .chip { position: relative; justify-content: center; font: 400 11px 'Lilita One', sans-serif; padding: 6px 2px; }
.dl-tabs .chip.on { color: var(--ink); background: var(--gold); border-color: var(--gold-d); }
#dl-body { overflow: hidden auto; display: flex; flex-direction: column; gap: 7px; padding: 2px; min-height: 200px; scrollbar-width: thin; }
.dl-sec { font-size: 14px; color: var(--ink); margin-top: 4px; }
.dl-note { margin: 0; font-size: 12px; font-weight: 500; color: var(--muted); text-align: center; }
.pz { display: inline-flex; align-items: center; gap: 2px; font: 400 13px 'Lilita One', sans-serif; white-space: nowrap; }
.pz .chest { --w: 24px; }

.cal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.cal-day { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 3px; min-height: 66px;
           padding: 5px 3px; border-radius: 12px; background: #fff; border: 2px solid var(--cream-b); color: var(--ink); }
.cal-day small { font-size: 10px; color: var(--muted); }
.cal-pz { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 4px; }
.cal-day.big { grid-column: span 2; background: #fff5d6; border-color: var(--gold); }
.cal-day.done { opacity: .55; }
.cal-day.today { border-color: var(--gold-d); box-shadow: 0 0 0 3px #ffc21a88; animation: glow-pulse .7s ease-in-out infinite alternate; }
.cal-ok { position: absolute; inset: 0; display: grid; place-items: center; font-size: 30px; color: #1f9e4a; text-shadow: 0 2px 0 #fff; }

.dl-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px; padding: 7px 8px; }
.dl-row.bonus { background: linear-gradient(#8a5fd0, #5a3a9e); border-color: #c7a8ff; }
.dl-row.got { opacity: .6; }
.dl-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dl-txt b { font: 400 14px 'Lilita One', sans-serif; text-shadow: 0 1.5px 0 var(--blue-dd); }
.dl-txt .bar { height: 9px; flex: none; } .dl-txt .bar i { background-color: var(--gold); }
.dl-txt small { font-size: 11px; color: var(--muted); }
.dl-pz { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; color: #fff; }
.dl-row .btn { padding: 7px 10px; font-size: 13px; }
.dl-ok { font-size: 22px; color: #8dffa8; padding: 0 8px; }

.wheel-wrap { position: relative; width: 270px; height: 270px; margin: 6px auto 4px; }
.wheel { position: absolute; inset: 0; border-radius: 50%; border: 5px solid var(--ink); box-shadow: 0 5px 0 var(--ink), 0 0 18px #ffe07088;
         background: repeating-conic-gradient(#5d7ba3 0 var(--seg, 45deg), #465f85 var(--seg, 45deg) calc(var(--seg, 45deg) * 2)); }
.wheel::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; border: 3px dashed #ffe07066; }
.w-seg { position: absolute; left: 50%; top: 0; width: 0; height: 50%; transform-origin: 50% 100%; }
.w-seg .w-pz { position: absolute; top: 14px; left: 50%; translate: -50% 0; display: flex; flex-direction: column; align-items: center; gap: 1px; color: #fff;
               text-shadow: 0 1.5px 0 var(--ink); }
.wheel-hub { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; translate: -50% -50%; border-radius: 50%;
             background: radial-gradient(circle at 40% 35%, var(--gold-l), var(--gold-d)); border: 4px solid var(--ink); }
.wheel-pin { position: absolute; left: 50%; top: -12px; translate: -50% 0; z-index: 2; width: 0; height: 0; border-left: 16px solid transparent;
             border-right: 16px solid transparent; border-top: 30px solid var(--atk); filter: drop-shadow(0 2px 0 var(--ink)) drop-shadow(0 -1px 0 var(--ink)); }

.wk-card { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 12px; border-radius: 16px; color: #fff;
           background: linear-gradient(160deg, #8a1830, #33144d); border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink); }
.wk-img { width: 150px; height: 130px; display: grid; place-items: end center; background: radial-gradient(circle at 50% 70%, #ffd23f55, transparent 65%); }
.wk-img img { max-width: 140px; max-height: 124px; image-rendering: pixelated; animation: glow-pulse .9s ease-in-out infinite alternate; }
.wk-card b { font-size: 22px; text-shadow: var(--outline); }
.wk-meta { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
.wk-pz { display: flex; align-items: center; gap: 6px; font: 400 14px 'Lilita One', sans-serif; }

#dl-toast { position: absolute; left: 50%; bottom: 18px; translate: -50% 0; z-index: 3; padding: 8px 14px; border-radius: 999px; pointer-events: none;
            font-size: 15px; color: var(--ink); background: var(--gold); border: 2px solid var(--gold-d); box-shadow: 0 3px 0 var(--gold-d);
            white-space: nowrap; opacity: 0; }
#dl-toast.on { animation: toast 2.2s ease-out; }
@keyframes toast { 0% { opacity: 0; translate: -50% 20px; } 12%, 80% { opacity: 1; translate: -50% 0; } 100% { opacity: 0; translate: -50% -10px; } }
@media (max-height: 700px) { .gift span { display: none; } .wheel-wrap { width: 230px; height: 230px; } .cal-day { min-height: 56px; } }

/* ---------- overlay enter / exit ---------- */
#modal, #daily, #eggs, #pvp, #auth { animation: ov-in .2s ease-out; }
#modal .box, #daily .dl-box, #eggs .box, #auth .box, #pvp > * { animation: box-in .34s cubic-bezier(.34, 1.56, .64, 1) backwards; }
#pvp > :nth-child(2) { animation-delay: .05s; } #pvp > :nth-child(3) { animation-delay: .1s; } #pvp > :nth-child(4) { animation-delay: .15s; }
.closing { animation: ov-out .18s ease-in forwards !important; pointer-events: none; }
.closing .box, .closing .dl-box, #pvp.closing > * { animation: box-out .18s ease-in forwards !important; }
@keyframes ov-in { from { opacity: 0; } }
@keyframes ov-out { to { opacity: 0; } }
@keyframes box-in { from { opacity: 0; scale: .82; translate: 0 24px; } }
@keyframes box-out { to { opacity: 0; scale: .9; translate: 0 14px; } }
@media (prefers-reduced-motion: reduce) { #modal, #daily, #eggs, #pvp, #auth, #modal .box, #daily .dl-box, #eggs .box, #auth .box, #pvp > *,
  .auth-bg, .auth-mark, #auth-form > * { animation: none; } .auth-ink { transition: none; } }

/* ---------- forms shared by login, settings, friends, chat, rename ---------- */
#auth-form input, .set-form input, .fr-add input, .modal-input, #hatch-form input {
  font: 600 16px 'Fredoka', sans-serif; padding: 9px 12px; border-radius: 12px; border: 2px solid var(--blue-d); background: #fff;
  color: var(--ink); user-select: text; -webkit-user-select: text; outline: none; min-width: 0; width: 100%; }
#auth-form input:focus, .set-form input:focus, .fr-add input:focus, .modal-input:focus, #hatch-form input:focus { border-color: var(--gold-d); box-shadow: 0 0 0 3px #ffc21a55; }
#auth-form label small { font: 500 11px 'Fredoka', sans-serif; color: var(--muted); }
#auth:not(.register) .reg { display: none; }
.avatars { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin-top: 4px; }
.av { aspect-ratio: 1; padding: 0; display: grid; place-items: center; border-radius: 12px; cursor: pointer; background: #fff; border: 2px solid var(--cream-b); }
.av.on { border-color: var(--gold-d); box-shadow: 0 0 0 3px #ffc21a88; background: #fff5d6; }
.avatar { width: 34px; height: 34px; object-fit: contain; image-rendering: pixelated; flex: none; }
.avatar.big { width: 56px; height: 56px; }
.modal-input { text-align: center; font-size: 18px; }

/* bottom sheets: settings, friends, chat */
#menu, #profile, #pass, #settings, #friends, #evo { position: fixed; inset: 0; z-index: 11; display: grid; place-items: center; padding: 12px; background: #16223acc; }
.menu-item { width: 100%; justify-content: flex-start; gap: 10px; padding: 8px 10px; font-size: 16px; text-shadow: none;
             color: var(--ink); background: #fff; border: 2px solid var(--cream-b); box-shadow: 0 2px 0 var(--cream-b); }
.menu-item:active { translate: 0 2px; box-shadow: none; border-color: var(--gold); }
.menu-ic { width: 38px; height: 38px; image-rendering: pixelated; flex: none; object-fit: contain; }
.menu-out { width: 100%; justify-content: center; margin-top: 2px; padding: 9px; font-size: 14px;
            background: linear-gradient(#ff7a6e, #d8382c); border-color: #7a1810; box-shadow: 0 3px 0 #7a1810; }

/* JOGAR and BUILD open a picker instead of switching tabs */
#pick-scrim { position: absolute; inset: 0; z-index: 11; background: #16223a66; animation: ov-in .15s ease-out; }
.picker { position: absolute; right: 6px; bottom: 70px; z-index: 12; width: min(320px, calc(100% - 12px)); display: flex; flex-direction: column; gap: 6px;
          padding: 8px; background: var(--cream); border: 3px solid var(--blue-d); border-radius: 18px;
          box-shadow: 0 6px 0 var(--blue-dd), 0 16px 28px #16223a55; animation: pm-in .18s cubic-bezier(.34, 1.56, .64, 1); }
.picker::after { content: ''; position: absolute; left: var(--arrow, 20px); bottom: -10px; width: 16px; height: 16px; rotate: 45deg;
                 background: var(--cream); border-right: 3px solid var(--blue-d); border-bottom: 3px solid var(--blue-d); }
.pm-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 9px; cursor: pointer; text-align: left;
           border-radius: 14px; border: 2px solid var(--cream-b); background: #fff; box-shadow: 0 2px 0 var(--cream-b); }
.pm-item img { width: 44px; height: 44px; image-rendering: pixelated; flex: none; object-fit: contain; }
.pm-item span { display: flex; flex-direction: column; min-width: 0; }
.pm-item b { font-size: 17px; color: var(--ink); }
.pm-item small { font-size: 12px; color: #6b7486; line-height: 1.2; }
.pm-item:active { translate: 0 2px; box-shadow: none; border-color: var(--gold); }
/* o mesmo ponto da barra de baixo, repetido no item que tem a novidade: o JOGAR/BUILD dizem que tem algo, o menu diz onde */
.pm-item.dot { position: relative; }
.pm-item.dot::after { content: ''; position: absolute; top: 4px; right: 4px; width: 12px; height: 12px; border-radius: 50%;
                      background: var(--atk); border: 2px solid #fff; animation: pulse2 .6s ease-in-out infinite alternate; }
@keyframes pm-in { from { opacity: 0; translate: 0 12px; } }
.sheet { width: 100%; max-width: 420px; max-height: calc(100dvh - 24px); display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 20px; }
.sheet-body { overflow: hidden auto; display: flex; flex-direction: column; gap: 8px; min-height: 0; flex: 1; scrollbar-width: thin; padding: 2px; }
.set-who { display: flex; align-items: center; gap: 10px; }
.set-who b { display: block; font-size: 20px; } .set-who small { color: var(--muted); font-size: 13px; }
.set-form { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 14px; background: #fff; border: 2px solid var(--cream-b); }
.set-form label { display: flex; flex-direction: column; gap: 4px; font: 400 14px 'Lilita One', sans-serif; }
.set-range { display: grid; grid-template-columns: auto 64px 1fr 44px; align-items: center; gap: 8px; font: 400 14px 'Lilita One', sans-serif; }
.set-range i svg path { fill: var(--blue-d); stroke: var(--blue-d); }
.set-range input { accent-color: var(--gold-d); width: 100%; }
.set-range b { text-align: right; font-weight: 400; }
.set-check { display: flex; align-items: center; gap: 10px; font: 400 15px 'Lilita One', sans-serif; cursor: pointer; }
.set-check input { position: absolute; opacity: 0; }
.set-check span { width: 46px; height: 26px; border-radius: 999px; background: #c9cfdb; border: 2px solid var(--ink); position: relative; transition: background .15s; }
.set-check span::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff;
                         border: 2px solid var(--ink); transition: translate .15s; }
.set-check input:checked + span { background: #3fd05a; } .set-check input:checked + span::after { translate: 20px 0; }
.set-check input:focus-visible + span { box-shadow: 0 0 0 3px #ffc21a88; }
.sheet .btn[href] { align-self: flex-start; }
.set-danger { display: flex; gap: 8px; } .set-danger .btn { flex: 1; background: linear-gradient(#ff7a6e, #d8382c); border-color: #7a1810; box-shadow: 0 3px 0 #7a1810; }

.fr-add { display: flex; gap: 6px; } .fr-add .btn { flex: none; padding: 8px 12px; font-size: 13px; }
.fr-me { font-size: 12px; color: var(--muted); }
.fr-row { position: relative; display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 8px; padding: 6px 8px; }
.fr-row .dot { position: absolute; left: 34px; top: 30px; width: 11px; height: 11px; border-radius: 50%; background: #8d99ae; border: 2px solid var(--ink); }
.fr-row .dot.on { background: #3fd05a; }
.fr-txt { display: flex; flex-direction: column; min-width: 0; }
.fr-txt b { font: 400 15px 'Lilita One', sans-serif; text-shadow: 0 1.5px 0 var(--blue-dd); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-txt small { font-size: 11px; color: var(--muted); }
.fr-pet { display: flex; align-items: center; gap: 3px; color: #fff !important; }
.fr-pet img { width: 20px; height: 20px; object-fit: contain; image-rendering: pixelated; }
.fr-act { display: flex; gap: 4px; } .fr-act .btn { padding: 6px 10px; font-size: 12px; }

.msg { display: flex; gap: 8px; align-items: flex-start; }
.msg > div { min-width: 0; padding: 6px 10px; border-radius: 4px 14px 14px 14px; background: #fff; border: 2px solid var(--cream-b); }
.msg b { font: 400 14px 'Lilita One', sans-serif; margin-right: 6px; }
.msg small { font-size: 10px; color: var(--muted); }
.msg p { margin: 2px 0 0; font-size: 15px; font-weight: 500; overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; }
.msg.mine { flex-direction: row-reverse; } .msg.mine > div { border-radius: 14px 4px 14px 14px; background: #fff5d6; border-color: var(--gold); }

/* arena: prizes and the rested-floors chip */
#corner { flex-direction: column; align-items: flex-end; gap: 5px; }
.corner-row { display: flex; align-items: center; gap: 6px; }
.round-btn { position: relative; width: 40px; height: 40px; padding: 0; display: grid; place-items: center; border-radius: 50%; cursor: pointer;
             background: radial-gradient(circle at 40% 35%, #7f9cc4, #34496a); border: 2px solid var(--ink); box-shadow: 0 3px 0 var(--ink); }
.round-btn:active { translate: 0 2px; box-shadow: 0 1px 0 var(--ink); }
.round-btn.dot::after { content: ''; position: absolute; top: -3px; right: -3px; width: 12px; height: 12px; border-radius: 50%;
                        background: var(--atk); border: 2px solid #fff; animation: pulse2 .6s ease-in-out infinite alternate; }
.badge { position: absolute; top: -5px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px;
         font: 400 11px/14px 'Lilita One', sans-serif; color: #fff; background: var(--atk); border: 2px solid #fff; }
.btn.dot { position: relative; }
.btn.dot::after { content: ''; position: absolute; top: -5px; right: -5px; width: 12px; height: 12px; border-radius: 50%;
                  background: var(--atk); border: 2px solid #fff; animation: pulse2 .6s ease-in-out infinite alternate; }
#chat-bubble { position: absolute; left: 8px; right: 56px; bottom: 22px; z-index: 5; display: flex; align-items: center; gap: 6px; padding: 5px 10px 5px 5px;
               border-radius: 14px; background: #fff8e8f2; border: 2px solid var(--ink); box-shadow: 0 3px 0 var(--ink); color: var(--ink);
               font-size: 13px; cursor: pointer; }
#chat-bubble span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#chat-bubble .avatar { width: 26px; height: 26px; }
#chat-bubble.on { animation: box-in .35s cubic-bezier(.34, 1.56, .64, 1); }
#pet-name { cursor: pointer; } #pet-name::after { content: ' ✎'; font-size: 14px; color: var(--muted); }

#toast { position: fixed; left: 50%; bottom: 90px; translate: -50% 0; z-index: 14; max-width: calc(100% - 32px); padding: 8px 14px; border-radius: 14px;
         font-size: 14px; text-align: center; color: var(--ink); background: var(--gold); border: 2px solid var(--gold-d); box-shadow: 0 3px 0 var(--gold-d);
         pointer-events: none; opacity: 0; }
#toast { z-index: 16; } /* aviso continua legível com um modal aberto */
#toast.on { animation: toast 2.6s ease-out; }
#menu, #profile, #pass, #settings, #friends, #evo { animation: ov-in .2s ease-out; }
#menu .sheet, #profile .sheet, #pass .sheet, #settings .sheet, #friends .sheet, #evo .sheet { animation: box-in .34s cubic-bezier(.34, 1.56, .64, 1) backwards; }
.closing .sheet { animation: box-out .18s ease-in forwards !important; }
@media (max-height: 700px) { .round-btn { width: 34px; height: 34px; } .round-btn svg { width: 20px; height: 20px; } #corner { gap: 3px; } #chat-log { height: 20dvh; } }

/* ---------- brincadeiras: mini games que enchem o humor ---------- */

#play { position: fixed; inset: 0; z-index: 15; display: grid; place-items: center; padding: 14px; background: #16223acc;
        animation: ov-in .2s ease-out; }
#play .box { width: 100%; max-width: 380px; padding: 12px; display: flex; flex-direction: column; gap: 8px; border-radius: 20px;
             animation: box-in .34s cubic-bezier(.34, 1.56, .64, 1) backwards; }
.play-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.play-head .pix { font-size: 20px; color: var(--gold-l); text-shadow: var(--outline); }
.play-head .btn { flex: none; padding: 5px 10px; font-size: 12px; }
.play-time { flex: none; }
.play-time i { background: var(--gold); }
.play-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.play-foot .label { font-size: 12px; }
.play-foot .pix { font-size: 20px; color: var(--gold-l); text-shadow: var(--outline); }

#play-stage { position: relative; aspect-ratio: 3 / 2; border-radius: 14px; border: 3px solid var(--ink); overflow: hidden;
              background: url(assets/bg/digibasefront.png) center/cover, var(--navy); }
.mg-pet { position: absolute; width: 44px; translate: -50% -50%; pointer-events: none;
          transition: left .1s steps(2), top .1s steps(2); }
.mgp-catch .mg-pet { width: 56px; pointer-events: auto; cursor: pointer; }
@keyframes mg-pop { 40% { translate: -50% -140%; } }
.mg-pop { animation: mg-pop .4s ease-out; }

.mg-pad { position: absolute; width: 38%; height: 36%; border-radius: 14px; border: 3px solid #ffffff88; background: #ffffff2e; cursor: pointer;
          transition: background .1s, box-shadow .1s; }
.mg-pad.p0 { left: 4%; top: 6%; } .mg-pad.p1 { right: 4%; top: 6%; }
.mg-pad.p2 { left: 4%; bottom: 6%; } .mg-pad.p3 { right: 4%; bottom: 6%; }
.mg-pad.on { background: var(--gold); border-color: #fff; box-shadow: 0 0 18px var(--gold-l); }

.mg-track { position: absolute; left: 7%; right: 7%; bottom: 30%; height: 24px; border-radius: 999px;
            background: var(--navy); border: 3px solid var(--ink); }
.mg-zone { position: absolute; top: 0; bottom: 0; background: var(--heal); border-radius: 999px; }
.mg-mark { position: absolute; top: -26px; font-size: 20px; color: var(--gold-l); translate: -50% 0; }
#mg-go { position: absolute; left: 50%; bottom: 5%; translate: -50% 0; width: 64%; padding: 8px; }
@media (prefers-reduced-motion: reduce) { #play, #play .box { animation: none; } .mg-pop { animation-duration: .01s; } }

/* ---------- cena da digivolução: escurece tudo menos o pet, e revela os ganhos ---------- */
#evo-scene { position: fixed; inset: 0; z-index: 8; pointer-events: auto;
             background: radial-gradient(ellipse 62% 30% at 50% 24%, #16223a00 40%, #16223acc 78%, #16223ae6 100%);
             animation: ov-in .3s ease-out; }
#evo-gains { position: absolute; left: 50%; bottom: 12%; translate: -50% 0; display: flex; flex-direction: column; gap: 4px;
             width: min(260px, calc(100vw - 40px)); padding: 10px 14px; border-radius: 16px;
             background: var(--cream); color: var(--ink); border: 3px solid var(--blue-d); box-shadow: 0 5px 0 var(--blue-dd); }
.eg-row { display: flex; align-items: center; justify-content: space-between; font-size: 15px; opacity: 0;
          animation: eg-in .3s ease-out forwards; }
.eg-row b { font: 400 17px 'Lilita One', sans-serif; color: #1f9e4a; }
.eg-row.new b { color: var(--gold-d); }
@keyframes eg-in { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { .eg-row { animation-duration: .01s; } }

/* ---------- tutorial de primeiro acesso: buraco no escurecido + balão do pet ---------- */
#tour { position: fixed; inset: 0; z-index: 17; pointer-events: none; outline: none; }
#hand .c-rar { display: none; } /* na mão a carta tem 69px: a etiqueta de raridade virava um borrão de 8px. O corpo da carta já diz a raridade */
#tour-hit { position: absolute; inset: 0; z-index: 1; pointer-events: auto; }
/* passo interativo: o buraco fica vivo e o resto é bloqueado por quatro retângulos */
.tour-block { position: absolute; z-index: 1; pointer-events: auto; display: none; }
#tour.tour-open #tour-hit { display: none; }
#tour.tour-open .tour-block { display: block; }
#tour-ring { position: absolute; z-index: 0; pointer-events: none; border-radius: 18px;
             box-shadow: 0 0 0 3px var(--gold-l), 0 0 0 7px var(--ink), 0 0 0 99vmax #16223ad9;
             transition: left .28s ease, top .28s ease, width .28s ease, height .28s ease; }
#tour-bubble { position: absolute; z-index: 2; pointer-events: auto; display: grid; grid-template-columns: auto 1fr;
               align-items: center; gap: 5px 8px; width: min(300px, calc(100vw - 24px)); padding: 10px 12px 9px;
               border-radius: 16px; background: var(--cream); color: var(--ink); border: 3px solid var(--blue-d);
               box-shadow: 0 5px 0 var(--blue-dd), 0 14px 26px #16223a55; transition: left .2s, top .2s; }
#tour-pet { grid-area: 1 / 1; width: 42px; height: 42px; object-fit: contain; }
#tour-text { grid-area: 1 / 2; margin: 0; font-size: 14px; font-weight: 500; line-height: 1.25; }
#tour-text b { color: var(--gold-d); }
.tour-foot { grid-area: 2 / 1 / 3 / 3; display: flex; align-items: center; gap: 6px; margin-top: 2px; }
#tour-count { margin-right: auto; }
#tour-count { font-size: 12px; color: #6b7486; }
#tour-step { padding: 4px 8px; font-size: 11px; }
#tour-x { flex: none; width: 28px; height: 28px; padding: 0; font-size: 14px; } /* na fileira, não flutuando sobre o texto: em cima do balão o ✕ cortava a frase */
@media (prefers-reduced-motion: reduce) { #tour-ring, #tour-bubble { transition: none; } }

/* ---------- abertura: o pet fala com o jogador antes do dashboard ---------- */
#intro { position: fixed; inset: 0; z-index: 18; display: grid; place-items: center; padding: calc(20px + var(--sat)) 16px calc(20px + var(--sab));
         background: radial-gradient(circle at 50% 32%, #35507a, #16223a 72%); animation: ov-in .3s ease-out; }
.intro-scene { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; max-width: 360px; }
#intro-pet { width: 104px; height: 104px; object-fit: contain; filter: drop-shadow(0 8px 14px #0008); }
#intro-pet.hop { animation: intro-hop .5s ease-out; }
@keyframes intro-hop { 45% { translate: 0 -14px; } 75% { translate: 0 -4px; } }
#intro-box { position: relative; width: 100%; min-height: 104px; display: flex; align-items: center; padding: 14px 16px;
             border-radius: 18px; background: var(--cream); color: var(--ink); border: 3px solid var(--blue-d);
             box-shadow: 0 6px 0 var(--blue-dd), 0 16px 30px #0006; }
#intro-text { margin: 0; font-size: 16px; font-weight: 500; line-height: 1.35; }
#intro-text::after { content: '▌'; color: var(--gold-d); animation: intro-caret .6s steps(2) infinite; }
#intro-text.done::after { content: ''; }
@keyframes intro-caret { 50% { opacity: 0; } }
#intro-skip { position: absolute; right: 8px; bottom: 6px; padding: 3px 8px; font-size: 11px; opacity: .75; }
@media (max-height: 700px) { #intro-pet { width: 84px; height: 84px; } #intro-box { min-height: 88px; padding: 10px 12px; } #intro-text { font-size: 15px; } }

/* ---------- convite pra instalar o app (tela de login, só no celular) ---------- */
.inst { display: flex; align-items: center; gap: 12px; text-align: left; }
.inst img { width: 60px; height: 60px; flex: none; border-radius: 14px; image-rendering: auto; box-shadow: 0 3px 0 var(--blue-dd); }
.inst p { margin: 0; }
.inst-steps { margin: 12px 0 0; padding: 9px 11px; border-radius: 12px; background: #16223a14; text-align: left; }
.inst-ic { vertical-align: -3px; color: var(--blue-d); }

/* ---------- carta aberta na batalha: segurar uma carta da mão abre ela grande com a descrição do lado ---------- */
#inspect { position: fixed; inset: 0; z-index: 18; outline: none; display: flex; flex-direction: column; align-items: center; justify-content: center;
           gap: 12px; padding: calc(16px + var(--sat)) 14px calc(16px + var(--sab)); background: #0d1526d9; animation: ov-in .15s ease-out; }
.ins-box { display: flex; align-items: center; gap: 14px; width: min(440px, 100%); padding: 14px; border-radius: 20px;
           background: var(--cream); border: 3px solid var(--blue-d); box-shadow: 0 6px 0 var(--blue-dd);
           animation: box-in .3s cubic-bezier(.34, 1.56, .64, 1); }
#ins-card { flex: none; width: min(40vw, 170px); }
#ins-card .card { width: 100%; margin: 0; pointer-events: none; }
#ins-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; color: var(--ink); text-align: left; }
#ins-info b { font-size: 20px; line-height: 1.1; }
#ins-info p { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.3; }
.ins-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.ins-hint { color: #fff; font-size: 13px; opacity: .85; text-shadow: var(--outline); }
@media (max-width: 340px) { .ins-box { flex-direction: column; text-align: center; } #ins-card { width: 150px; } }
@media (prefers-reduced-motion: reduce) { #inspect, .ins-box { animation: none; } }