/* ===== Painel de Criaturas (v17) — cards, barra de vida, cápsula de cruzamento ===== */
#creatures-panel { width: min(400px, 95vw); }
#creatures-tamer { display:flex; flex-wrap:wrap; gap:6px; font-size:11px; color:#9aa4af; margin:2px 0 4px; }
#creatures-tamer .cr-chip { padding:3px 8px; border-radius:999px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.08); }
#creatures-tamer .cr-chip.full { color:#ffb347; border-color:rgba(255,179,71,0.4); }

/* tabs */
.cr-tabs { display:flex; gap:4px; margin:8px 0 12px; padding:4px; background:rgba(0,0,0,0.38); border:1px solid rgba(255,255,255,0.08); border-radius:14px; flex-wrap:nowrap; }
.cr-tab { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:1px; padding:7px 4px; font-size:11px; font-weight:700; line-height:1.15; border-radius:10px; border:1px solid transparent; background:transparent; color:#8a93a0; cursor:pointer; transition:background .18s, color .18s, transform .1s; }
.cr-tab .cr-tab-ico { font-size:16px; line-height:1; }
.cr-tab .cr-tab-cnt { font-size:10px; font-weight:600; opacity:.75; }
.cr-tab.active { background:linear-gradient(160deg,#e3c17e,#c6a15b); color:#1a1208; box-shadow:0 3px 10px rgba(198,161,91,0.35); }
.cr-tab.active .cr-tab-cnt { opacity:.9; }
.ui-win .cr-tab { padding:8px 4px; }

.panel-section-title { display:flex; justify-content:space-between; align-items:center; }
.cr-empty { text-align:center; opacity:.65; font-size:12px; padding:18px 10px; border:1px dashed rgba(255,255,255,0.14); border-radius:12px; line-height:1.5; }

/* card de criatura */
.cr-card { --tc:#b8c0c8; position:relative; display:flex; flex-direction:column; gap:7px; padding:10px 10px 9px 13px; margin-bottom:9px; border-radius:13px; background:linear-gradient(160deg,rgba(255,255,255,0.05),rgba(0,0,0,0.28)); border:1px solid rgba(255,255,255,0.09); overflow:hidden; }
.cr-card::before { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--tc); box-shadow:0 0 12px var(--tc); }
.cr-card.compact { padding:8px 8px 8px 11px; margin-bottom:0; }
.cr-card.dying { border-color:rgba(255,120,100,0.45); }
.cr-head { display:flex; align-items:center; gap:9px; }
.cr-ava { flex:none; width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:22px; background:radial-gradient(circle at 35% 30%,rgba(255,255,255,0.18),rgba(0,0,0,0.4)); border:2px solid var(--tc); }
.cr-id { min-width:0; flex:1; }
.cr-name { font-size:13.5px; font-weight:700; color:#f0e6d0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cr-sub { display:flex; flex-wrap:wrap; gap:4px; margin-top:3px; }
.cr-badge { font-size:10px; font-weight:700; padding:2px 7px; border-radius:999px; background:rgba(255,255,255,0.07); color:#c8d0d8; white-space:nowrap; }
.cr-badge.tier { background:var(--tc); color:#10141a; }
.cr-badge.good { color:#7cf296; } .cr-badge.bad { color:#ff9a8a; }
.cr-val { flex:none; font-size:11px; font-weight:700; color:#e8d5a8; text-align:right; }

/* barra de vida */
.cr-life { display:flex; flex-direction:column; gap:3px; }
.cr-life-top { display:flex; justify-content:space-between; font-size:10.5px; color:#aab3bd; }
.cr-life-top b { color:#e8eef5; }
.cr-life-bar { position:relative; height:9px; border-radius:6px; background:rgba(0,0,0,0.45); border:1px solid rgba(255,255,255,0.08); overflow:hidden; }
.cr-life-bar > i { display:block; height:100%; border-radius:6px; background:linear-gradient(90deg,#3fbf6a,#7cf296); transition:width .4s; }
.cr-life-bar > u { position:absolute; top:0; bottom:0; width:1px; background:rgba(255,255,255,0.28); }
.cr-life.mid .cr-life-bar > i { background:linear-gradient(90deg,#d9a93a,#ffd36a); }
.cr-life.low .cr-life-bar > i { background:linear-gradient(90deg,#d9632f,#ff9a5a); }
.cr-life.crit .cr-life-bar > i { background:linear-gradient(90deg,#c0392b,#ff6a5a); animation:cr-blink 1s ease-in-out infinite; }
.cr-life.crit .cr-life-top b { color:#ff8a7a; }
@keyframes cr-blink { 50% { opacity:.55; } }

/* necessidades */
.cr-needs { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.cr-need { font-size:10px; color:#9aa4af; }
.cr-need .nb { height:5px; border-radius:3px; background:rgba(0,0,0,0.45); margin-top:2px; overflow:hidden; }
.cr-need .nb > i { display:block; height:100%; border-radius:3px; }
.cr-need.hun i { background:#e8a24a; } .cr-need.hap i { background:#f0c94a; } .cr-need.bon i { background:#ff7aa8; }
.cr-need.warn i { background:#ff6a5a; }
.cr-traits { display:flex; flex-wrap:wrap; gap:4px; }
.cr-trait { font-size:10px; padding:2px 7px; border-radius:8px; background:rgba(124,242,150,0.1); border:1px solid rgba(124,242,150,0.25); color:#b8f0c6; }
.cr-trait.bad { background:rgba(255,120,100,0.1); border-color:rgba(255,120,100,0.3); color:#ffb0a4; }

/* botões */
.cr-actions { display:flex; flex-wrap:wrap; gap:5px; }
.cr-actions button { flex:1 1 auto; border:1px solid rgba(255,255,255,0.15); background:rgba(255,255,255,0.08); color:#e8eef5; border-radius:9px; padding:7px 10px; font-size:11px; font-weight:600; cursor:pointer; }
.cr-actions button:first-child { background:rgba(198,161,91,0.22); border-color:rgba(198,161,91,0.5); color:#f0dfb4; }
.cr-actions button:active { transform:scale(.96); }

/* slots do campo */
.followers-slots { display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.follower-slot { display:block; min-height:0; padding:0; border:1px dashed rgba(255,255,255,0.18); border-radius:13px; background:rgba(0,0,0,0.18); }
.follower-slot.filled { border:none; background:none; }
.follower-slot.empty { display:flex; align-items:center; gap:10px; padding:12px; color:#6f7885; font-size:12px; }
.follower-slot.empty .cr-ava { opacity:.35; border-style:dashed; border-color:#6f7885; --tc:#6f7885; }
.cr-cmds { display:flex; gap:4px; }
.cr-cmds button { flex:1; border:1px solid rgba(255,255,255,0.14); background:rgba(255,255,255,0.06); color:#cfd6dd; border-radius:8px; padding:6px 4px; font-size:10.5px; cursor:pointer; }
.cr-cmds button.on { border-color:#7cf296; color:#7cf296; background:rgba(124,242,150,0.1); }
.cr-hint { font-size:10px; opacity:.55; text-align:center; }

/* estábulo */
.cr-stable-banner { display:flex; align-items:center; gap:10px; padding:10px 12px; margin-bottom:10px; border-radius:12px; background:linear-gradient(160deg,rgba(120,80,40,0.35),rgba(0,0,0,0.3)); border:1px solid rgba(198,161,91,0.3); font-size:12px; }
.cr-stable-banner .big { font-size:26px; }
.cr-stable-banner .cap { margin-left:auto; text-align:right; font-weight:700; color:#e8d5a8; }
.cr-stable-banner .cap small { display:block; font-weight:400; color:#9aa4af; font-size:10px; }
.cr-stable-banner .pips { display:flex; flex-wrap:wrap; gap:2px; margin-top:3px; justify-content:flex-end; }
.cr-stable-banner .pips i { width:7px; height:7px; border-radius:2px; background:rgba(255,255,255,0.14); }
.cr-stable-banner .pips i.on { background:#c6a15b; }

/* cruzamento */
.breed-hint { font-size:11px; color:#9aa4af; margin:0 0 10px; line-height:1.4; }
.breed-capsule { display:grid; grid-template-columns:1fr auto 1fr; gap:8px; align-items:center; padding:12px 8px; margin-bottom:10px; background:radial-gradient(ellipse at center,rgba(60,38,90,0.6),rgba(0,0,0,0.38)); border:1px solid rgba(198,161,91,0.3); border-radius:16px; }
.breed-slot { text-align:center; padding:8px 4px; border-radius:12px; border:1px dashed rgba(255,255,255,0.14); background:rgba(0,0,0,0.22); min-height:112px; cursor:pointer; }
.breed-slot.filled { border-style:solid; border-color:rgba(198,161,91,0.5); background:rgba(198,161,91,0.09); }
.breed-mini { width:58px; height:58px; margin:0 auto 6px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:28px; background:linear-gradient(160deg,rgba(255,255,255,0.1),rgba(0,0,0,0.35)); border:2px solid rgba(255,255,255,0.14); overflow:hidden; }
.breed-mini canvas { width:100% !important; height:100% !important; border-radius:50%; }
.breed-mini-empty { opacity:.35; font-size:22px; }
.breed-slot-label { font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:#c6a15b; }
.breed-slot-meta { font-size:11px; color:#c8d0d8; margin-top:2px; line-height:1.3; }
.breed-center { display:flex; flex-direction:column; align-items:center; gap:6px; min-width:76px; }
.breed-egg { width:52px; height:64px; border-radius:50% 50% 48% 48%; display:flex; align-items:center; justify-content:center; background:radial-gradient(circle at 35% 30%,#fff6e0,#e8c878 45%,#a67c3a); border:2px solid rgba(255,230,160,0.5); box-shadow:0 0 18px rgba(255,200,100,0.35),0 6px 14px rgba(0,0,0,0.4); position:relative; }
.breed-egg.incubating { animation:breed-pulse 1.4s ease-in-out infinite; }
.breed-egg.ready { box-shadow:0 0 28px rgba(124,242,150,0.6),0 6px 14px rgba(0,0,0,0.4); border-color:#7cf296; animation:breed-pulse .8s ease-in-out infinite; }
.breed-egg-icon { font-size:26px; position:relative; z-index:1; }
.breed-egg-glow { position:absolute; inset:-6px; border-radius:50%; background:radial-gradient(circle,rgba(255,220,120,0.25),transparent 70%); pointer-events:none; }
@keyframes breed-pulse { 50% { transform:scale(1.08); } }
.breed-odds { font-size:10px; color:#b9c1ca; text-align:center; line-height:1.35; max-width:90px; }
.breed-preview { font-size:12px; color:#d8e0e8; padding:10px 12px; margin-bottom:8px; background:rgba(0,0,0,0.3); border-radius:10px; border:1px solid rgba(255,255,255,0.08); line-height:1.45; }
.breed-preview .bp-row { display:flex; justify-content:space-between; gap:8px; margin:3px 0; }
.breed-preview .bp-warn { color:#ff9a8a; } .breed-preview .bp-good { color:#7cf296; }
.breed-preview .bp-bar { height:6px; border-radius:3px; background:rgba(255,255,255,0.08); margin:6px 0 2px; overflow:hidden; }
.breed-preview .bp-bar > i { display:block; height:100%; border-radius:3px; background:linear-gradient(90deg,#7cf296,#6cb4ff,#c78bff,#ffb347); }
.breed-pick-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:10px; max-height:220px; overflow-y:auto; }
.breed-pick { --tc:#b8c0c8; display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left; padding:7px 9px !important; border-radius:10px !important; border:1px solid rgba(255,255,255,0.12); border-left:3px solid var(--tc) !important; background:rgba(255,255,255,0.05); color:#e8eef5; font-size:11.5px; cursor:pointer; }
.breed-pick .bp-q { font-size:10px; opacity:.8; }
.breed-pick.selected { border-color:#c6a15b; background:rgba(198,161,91,0.25); }
.breed-pick.tube { grid-column:1/-1; flex-direction:row; align-items:center; justify-content:space-between; background:rgba(120,90,200,0.14); border-color:rgba(160,130,255,0.4); }
.breed-pick-title { grid-column:1/-1; font-size:10.5px; color:#b9a8ff; margin-top:2px; }
.breed-start-btn { width:100%; margin-top:4px; padding:11px 12px !important; border-radius:11px !important; background:linear-gradient(160deg,#e3c17e,#c6a15b) !important; color:#1a1208 !important; font-weight:700 !important; border:none !important; cursor:pointer; }
.breed-start-btn:disabled { opacity:.4; cursor:not-allowed; }
#breed-status { font-size:12px; color:#cfe; margin:8px 0; min-height:24px; }

/* ===== Passo 5 — captura e revelação ===== */
.tame-ring { position:fixed; left:50%; bottom:26%; width:96px; transform:translateX(-50%); z-index:998; pointer-events:none; text-align:center; animation:tr-in .2s ease-out; }
.tame-ring svg { width:96px; height:96px; transform:rotate(-90deg); filter:drop-shadow(0 0 10px rgba(124,242,150,0.45)); }
.tame-ring .tr-bg { fill:rgba(0,0,0,0.5); stroke:rgba(255,255,255,0.14); stroke-width:6; }
.tame-ring .tr-fg { fill:none; stroke:#7cf296; stroke-width:6; stroke-linecap:round; }
.tame-ring .tr-emoji { position:absolute; top:0; left:0; width:96px; height:96px; display:flex; align-items:center; justify-content:center; font-size:38px; animation:tr-pulse .66s ease-in-out infinite; }
.tame-ring .tr-text { margin-top:6px; font-size:12px; font-weight:700; color:#d8f5df; text-shadow:0 1px 4px #000; white-space:nowrap; }
.tame-ring.done { animation:tr-pop .26s ease-out forwards; }
.tame-ring.fail { animation:tr-out .26s ease-in forwards; }
@keyframes tr-in { from { opacity:0; transform:translateX(-50%) scale(.7); } }
@keyframes tr-pulse { 50% { transform:scale(1.14); } }
@keyframes tr-pop { to { opacity:0; transform:translateX(-50%) scale(1.4); } }
@keyframes tr-out { to { opacity:0; transform:translateX(-50%) scale(.8); } }

.rv-overlay { --tc:#b8c0c8; position:fixed; inset:0; z-index:1200; display:flex; align-items:center; justify-content:center; padding:16px; background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--tc) 28%,rgba(0,0,0,0.78)),rgba(0,0,0,0.88) 70%); opacity:0; transition:opacity .22s; overflow:hidden; }
.rv-overlay.show { opacity:1; }
.rv-card { position:relative; width:min(340px,100%); max-height:94vh; overflow-y:auto; padding:18px 16px 14px; text-align:center; border-radius:20px; background:linear-gradient(170deg,rgba(32,26,44,0.96),rgba(12,10,18,0.97)); border:2px solid var(--tc); box-shadow:0 0 34px color-mix(in srgb,var(--tc) 55%,transparent),0 14px 40px rgba(0,0,0,0.6); transform:scale(.6) translateY(24px); opacity:0; }
.rv-overlay.show .rv-card { animation:rv-card-in .5s cubic-bezier(.2,1.4,.4,1) .08s forwards; }
@keyframes rv-card-in { to { transform:none; opacity:1; } }
.rv-head { font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--tc); margin-bottom:10px; }
.rv-orb { position:relative; width:104px; height:104px; margin:0 auto 8px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:radial-gradient(circle at 35% 30%,rgba(255,255,255,0.22),color-mix(in srgb,var(--tc) 30%,rgba(0,0,0,0.5))); border:3px solid var(--tc); box-shadow:0 0 26px color-mix(in srgb,var(--tc) 60%,transparent); }
.rv-orb::after { content:''; position:absolute; inset:-10px; border-radius:50%; border:2px solid var(--tc); opacity:0; animation:rv-ring 1.6s ease-out .5s infinite; }
.rv-emoji { font-size:54px; opacity:0; transform:scale(.2); }
.rv-overlay.show .rv-emoji { animation:rv-emoji-in .6s cubic-bezier(.2,1.6,.4,1) .45s forwards; }
@keyframes rv-emoji-in { to { opacity:1; transform:scale(1); } }
@keyframes rv-ring { 0% { opacity:.7; transform:scale(.9); } 100% { opacity:0; transform:scale(1.45); } }
.rv-name { font-size:19px; font-weight:800; color:#f6ecd4; }
.rv-tier { margin-top:3px; font-size:12.5px; font-weight:700; color:var(--tc); }
.rv-tags { display:flex; flex-wrap:wrap; justify-content:center; gap:5px; margin-top:8px; }
.rv-tag { font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:999px; background:color-mix(in srgb,var(--tc) 22%,rgba(0,0,0,0.4)); border:1px solid var(--tc); color:#fff; }
.rv-stats { display:flex; flex-direction:column; gap:6px; margin:12px 4px 8px; }
.rv-stat { display:grid; grid-template-columns:96px 1fr 26px; align-items:center; gap:7px; font-size:11px; color:#c8d0d8; text-align:left; }
.rv-stat b { color:#fff; text-align:right; }
.rv-bar { height:8px; border-radius:6px; background:rgba(0,0,0,0.5); overflow:hidden; border:1px solid rgba(255,255,255,0.08); }
.rv-bar > i { display:block; height:100%; width:0; border-radius:6px; background:linear-gradient(90deg,color-mix(in srgb,var(--tc) 60%,#000),var(--tc)); }
.rv-overlay.show .rv-bar > i { animation:rv-bar-fill .7s ease-out .7s forwards; }
@keyframes rv-bar-fill { to { width:var(--w); } }
.rv-meta { font-size:11px; color:#aab3bd; margin-bottom:6px; }
.rv-traits { display:flex; flex-wrap:wrap; justify-content:center; gap:5px; margin-bottom:6px; }
.rv-chip { font-size:10.5px; padding:2px 8px; border-radius:8px; background:rgba(124,242,150,0.1); border:1px solid rgba(124,242,150,0.28); color:#b8f0c6; }
.rv-ok { width:100%; margin-top:8px; padding:11px 12px; border-radius:11px; border:none; font-weight:800; cursor:pointer; color:#1a1208; background:linear-gradient(160deg,#f0d28e,var(--tc)); }
.rv-overlay.golden .rv-card { animation-name:rv-card-in; }
.rv-overlay.golden .rv-name { color:#ffe27a; text-shadow:0 0 12px rgba(255,216,74,0.6); }
.rv-overlay.tier-4 .rv-orb, .rv-overlay.golden .rv-orb { animation:rv-glow 1.4s ease-in-out infinite; }
@keyframes rv-glow { 50% { box-shadow:0 0 46px var(--tc),0 0 90px color-mix(in srgb,var(--tc) 50%,transparent); } }
.rv-confetti { position:absolute; left:50%; top:42%; width:0; height:0; pointer-events:none; }
.rv-confetti i { position:absolute; width:7px; height:11px; border-radius:2px; opacity:0; animation:rv-conf 1.25s cubic-bezier(.15,.7,.3,1) forwards; }
@keyframes rv-conf { 0% { opacity:1; transform:translate(0,0) rotate(0); } 100% { opacity:0; transform:translate(var(--dx),calc(var(--dy) + 90px)) rotate(var(--rot)); } }

/* ovo chocando */
.breed-egg.incubating { animation:egg-wobble 1.6s ease-in-out infinite; }
.breed-egg.ready { animation:egg-shake .7s ease-in-out infinite; }
.breed-egg.hatching { animation:egg-crack .9s ease-in forwards; }
@keyframes egg-wobble { 0%,100% { transform:rotate(0); } 25% { transform:rotate(-7deg); } 75% { transform:rotate(7deg); } }
@keyframes egg-shake { 0%,100% { transform:rotate(0) scale(1.04); } 20% { transform:rotate(-12deg) scale(1.08); } 40% { transform:rotate(11deg) scale(1.08); } 60% { transform:rotate(-9deg) scale(1.08); } 80% { transform:rotate(8deg) scale(1.08); } }
@keyframes egg-crack { 0% { transform:rotate(0) scale(1); } 30% { transform:rotate(-14deg) scale(1.1); } 55% { transform:rotate(14deg) scale(1.16); } 80% { transform:rotate(-10deg) scale(1.24); filter:brightness(1.6); } 100% { transform:scale(1.5); opacity:0; filter:brightness(3); } }
@media (prefers-reduced-motion: reduce) { .rv-confetti, .rv-orb::after { display:none; } .breed-egg.incubating, .breed-egg.ready { animation:none; } }