/* =========================================================================
   VoiceLink - Bit Hayvanlar (pets.js)
   Yasam kutusu, hayvan kartlari, yumurta catlatma ve kapisma arenasi
   ========================================================================= */

/* ---------- Piksel cizim: 2 karelik serit, adim adim oynar ---------- */
.pet-art {
    display: inline-block; flex: none;
    width: var(--s, 48px); height: var(--s, 48px);
    background-image: var(--strip); background-size: 200% 100%; background-repeat: no-repeat;
    image-rendering: pixelated; image-rendering: crisp-edges;
    animation: pet-strip 0.9s steps(1, end) infinite;
}
.pet-art.still { animation: none; }
@keyframes pet-strip { 0% { background-position: 0 0; } 50% { background-position: 100% 0; } }
@keyframes pet-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
:root[data-motion="reduce"] .pet-art { animation: none; }

.pet-rarity {
    display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: 9px;
    font-size: 0.66rem; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap;
    color: var(--rc); background: color-mix(in srgb, var(--rc) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--rc) 45%, transparent);
}

/* ---------- Kenar rayindaki pati dugmesi ---------- */
#btn-pets .rail-badge.warn { background: var(--warn); color: #111; }

/* ---------- Yasam kutusu ---------- */
.pet-habitat {
    position: absolute; z-index: 900;
    border-radius: 12px; overflow: hidden;
    background: var(--bg-dark); border: 1px solid var(--border);
    box-shadow: 0 10px 30px rgba(0,0,0,0.45);
    user-select: none; -webkit-user-select: none; touch-action: none;
}
.ph-head {
    display: flex; align-items: center; gap: 2px; height: 26px; padding: 0 3px 0 8px;
    cursor: grab; color: var(--text-muted); font-size: 0.72rem; font-weight: 600;
}
.ph-head:active { cursor: grabbing; }
.ph-title { display: flex; align-items: center; gap: 5px; flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; }
.ph-title > span { overflow: hidden; text-overflow: ellipsis; }
.ph-title .i { width: 14px; height: 14px; color: #f59e0b; flex: none; }
.ph-btn {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 24px; height: 22px; border: none; border-radius: 6px; padding: 0;
    background: transparent; color: var(--text-muted); cursor: pointer;
    transition: background var(--d-fast) var(--e-out), color var(--d-fast) var(--e-out);
}
.ph-btn:hover { background: var(--bg-hover); color: var(--text-main); }
.ph-btn.danger:hover { color: var(--danger); }
.ph-btn .i { width: 15px; height: 15px; }
.ph-canvas { display: block; image-rendering: pixelated; cursor: default; }
.ph-mini { display: none; }
.pet-habitat.minimized { border-radius: 50%; overflow: visible; }
.pet-habitat.minimized .ph-head, .pet-habitat.minimized .ph-canvas { display: none; }
.pet-habitat.minimized .ph-mini {
    display: flex; align-items: center; justify-content: center; position: relative;
    width: 44px; height: 44px; border: none; border-radius: 50%; cursor: pointer;
    background: linear-gradient(160deg, #fbbf24, #f97316); color: #fff; touch-action: none;
}
.ph-mini .i { width: 22px; height: 22px; }
.ph-mini-dot {
    position: absolute; top: 1px; right: 1px; width: 11px; height: 11px; border-radius: 50%;
    background: var(--primary); border: 2px solid var(--bg-dark);
}
.ph-mini-dot.warn { background: var(--danger); animation: ph-pulse 1.2s ease-in-out infinite; }
@keyframes ph-pulse { 50% { transform: scale(1.3); } }

/* ---------- Pencere ---------- */
.modal-content.pets-modal { position: relative; max-width: 760px; }
.pets-tabs { display: flex; gap: 0.3rem; margin-bottom: 1rem; border-bottom: 1px solid var(--border); }
.pets-tabs button {
    display: inline-flex; align-items: center; gap: 0.35rem;
    background: none; border: none; color: var(--text-muted); font: inherit; font-weight: 600; font-size: 0.88rem;
    padding: 0.55rem 0.8rem; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer;
}
.pets-tabs button .i { width: 16px; height: 16px; }
.pets-tabs button.active { color: var(--text-main); border-bottom-color: var(--primary); }
.pets-intro { margin-bottom: 0.9rem; line-height: 1.5; }

.pets-summary {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.8rem;
    padding: 0.8rem 0.9rem; border-radius: 12px; background: var(--bg-panel); margin-bottom: 0.6rem;
}
.pets-summary > div:first-child { flex: 1 1 260px; display: flex; flex-direction: column; gap: 0.2rem; }
.pets-summary small { color: var(--text-muted); font-size: 0.78rem; line-height: 1.45; }
.pets-ladder { display: flex; flex-wrap: wrap; gap: 4px; }
.pl-slot {
    width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
    border: 1.5px solid color-mix(in srgb, var(--rc) 60%, transparent); color: var(--rc);
    background: color-mix(in srgb, var(--rc) 10%, transparent);
}
.pl-slot small { font-size: 0.56rem; font-weight: 700; }
.pl-slot .i { width: 14px; height: 14px; }
.pl-slot.locked { opacity: 0.45; border-style: dashed; }
.pl-slot.free { animation: ph-pulse 1.6s ease-in-out infinite; }
.pets-rules {
    display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: var(--text-muted);
    margin: 0 0.2rem 0.9rem;
}
.pets-rules .i { width: 16px; height: 16px; color: var(--warn); flex: none; }

.pets-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 0.7rem; }
.pet-card {
    display: flex; flex-wrap: wrap; gap: 0.85rem; padding: 0.85rem; border-radius: 14px;
    background: var(--bg-panel); border: 1px solid var(--border);
    transition: box-shadow var(--d-base) var(--e-out), border-color var(--d-base) var(--e-out);
}
.pet-card.r2, .pet-card.r3, .pet-card.r4 { border-color: color-mix(in srgb, var(--rc) 40%, transparent); }
.pet-card.r3 { box-shadow: 0 0 0 1px color-mix(in srgb, var(--rc) 25%, transparent), 0 6px 22px color-mix(in srgb, var(--rc) 18%, transparent); }
.pet-card.r4 {
    background: linear-gradient(160deg, color-mix(in srgb, var(--rc) 12%, var(--bg-panel)), var(--bg-panel) 55%);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--rc) 35%, transparent), 0 8px 26px color-mix(in srgb, var(--rc) 25%, transparent);
}
.pet-card.starving { border-color: var(--danger); animation: pet-alarm 1.6s ease-in-out infinite; }
@keyframes pet-alarm { 50% { box-shadow: 0 0 0 3px rgba(239,68,68,0.25); } }
.pet-card.focus { box-shadow: 0 0 0 2px var(--primary); }
.pet-card-art {
    flex: none; width: 84px; display: flex; align-items: center; justify-content: center; align-self: flex-start;
    height: 84px; border-radius: 12px;
    background:
        linear-gradient(to bottom, transparent 70%, color-mix(in srgb, #22c55e 30%, transparent) 70%),
        radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--rc) 22%, transparent), transparent 70%),
        var(--bg-dark);
}
.pet-card-art .pet-art { animation: pet-strip 0.9s steps(1, end) infinite, pet-bob 1.8s ease-in-out infinite; }
.pet-card.r3 .pet-card-art .pet-art, .pet-card.r4 .pet-card-art .pet-art { filter: drop-shadow(0 0 6px var(--rc)); }
.pet-card-art > .i { width: 30px; height: 30px; color: var(--text-muted); opacity: 0.6; }
.pet-card-art.egg .pet-art { animation: pet-wobble 2.4s ease-in-out infinite; }
:root[data-motion="reduce"] .pet-card-art .pet-art { animation: none; }
.pet-card-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.pet-card-main > small { color: var(--text-muted); font-size: 0.78rem; line-height: 1.45; }
.pet-card-main > .btn { align-self: flex-start; margin-top: 0.2rem; }
.pet-free .pet-card-main, .pet-locked .pet-card-main { gap: 0.4rem; }
.pet-free .pet-rarity, .pet-locked .pet-rarity { align-self: flex-start; }
.pet-locked { opacity: 0.75; border-style: dashed; }
.pet-card-title { display: flex; align-items: center; gap: 0.3rem; min-width: 0; }
.pet-name { font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pet-card-title .pet-rarity { margin-left: auto; }
.pet-name-input { flex: 1; min-width: 0; padding: 0.3rem 0.5rem; font-size: 0.92rem; }
.pet-card-sub { color: var(--text-muted); font-size: 0.78rem; }
.pet-streak { color: #fb923c; font-weight: 600; white-space: nowrap; }
.pet-streak .i { width: 13px; height: 13px; vertical-align: -2px; }
.pet-meter-label {
    display: flex; justify-content: space-between; gap: 0.5rem; margin-top: 0.15rem;
    font-size: 0.72rem; color: var(--text-muted);
}
.pet-meter-label > span:first-child { display: inline-flex; align-items: center; gap: 0.25rem; flex: none; }
.pet-meter-label > span:last-child { text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pet-meter-label .warn { color: var(--warn-text); font-weight: 600; }
.pet-meter-label .i { width: 12px; height: 12px; }
.pet-meter { height: 7px; border-radius: 4px; background: rgba(var(--ov), 0.08); overflow: hidden; }
.pet-meter > span { display: block; height: 100%; border-radius: inherit; background: var(--primary); transition: width var(--d-slow) var(--e-out); }
.pet-meter.xp > span { background: linear-gradient(90deg, #818cf8, #c084fc); }
.pet-meter.food > span { background: #22c55e; }
.pet-meter.food.mid > span { background: var(--warn); }
.pet-meter.food.low > span { background: var(--danger); }
.pet-meter.joy > span { background: #f472b6; }
.pet-stats { display: flex; flex-wrap: wrap; gap: 0.25rem 0.7rem; margin-top: 0.25rem; font-size: 0.78rem; color: var(--text-muted); }
.pet-stats span { display: inline-flex; align-items: center; gap: 0.2rem; }
.pet-stats .i { width: 13px; height: 13px; }
.pet-stats .pet-power { color: var(--rc); font-weight: 700; }
.pet-actions { flex: 1 1 100%; display: flex; gap: 0.4rem; margin-top: -0.2rem; }
.pet-actions .btn { flex: 1; padding: 0.45rem 0.5rem; }
.pet-actions .btn:disabled { opacity: 0.45; cursor: default; }
.pet-card-title .pet-rarity + .ph-btn { margin-left: 0.15rem; }

/* ---------- Anilar ---------- */
.pets-memorial { display: flex; flex-direction: column; gap: 0.45rem; }
.pet-grave { display: flex; align-items: center; gap: 0.75rem; padding: 0.55rem 0.7rem; border-radius: 10px; background: var(--bg-panel); }
.pet-grave > div { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.pet-grave small { color: var(--text-muted); font-size: 0.76rem; }

/* ---------- Pencerenin ustundeki katman (yumurta, kapisma) ---------- */
.pet-overlay {
    position: fixed; inset: 0; z-index: 1100;
    display: flex; align-items: center; justify-content: center;
    padding: max(1rem, var(--safe-top)) 1rem max(1rem, var(--safe-bottom));
    background: rgba(0,0,0,0.6); backdrop-filter: blur(3px);
    animation: pet-fade var(--d-slow) var(--e-out);
}
@keyframes pet-fade { from { opacity: 0; } }
.pet-overlay-panel {
    width: 100%; max-width: 600px; max-height: 100%; overflow-y: auto;
    display: flex; flex-direction: column; align-items: center; gap: 0.8rem;
    padding: 1.4rem; border-radius: 16px; background: var(--bg-dark); border: 1px solid var(--border);
    box-shadow: var(--shadow);
}

/* ---------- Yumurta catlatma ---------- */
.pet-hatch-card { gap: 0.6rem; text-align: center; max-width: 400px; }
.pet-hatch-stage {
    position: relative; width: 140px; height: 140px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--rc) 35%, transparent), transparent 70%);
}
.pet-hatch-egg { width: 96px; height: 96px; image-rendering: pixelated; animation: pet-wobble 0.9s ease-in-out infinite; }
.pet-hatch-egg.wobble { animation: pet-shake 0.35s ease-in-out 2, pet-wobble 0.9s ease-in-out 0.7s infinite; }
@keyframes pet-wobble { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-7deg); } 75% { transform: rotate(7deg); } }
@keyframes pet-shake { 25% { transform: translateX(-4px) rotate(-10deg); } 75% { transform: translateX(4px) rotate(10deg); } }
.pet-hatch-stage .pet-art { animation: pet-strip 0.9s steps(1, end) infinite, pet-pop 0.5s var(--e-out); filter: drop-shadow(0 0 10px var(--rc)); }
@keyframes pet-pop { from { transform: scale(0.2); opacity: 0; } 70% { transform: scale(1.12); } }
.pet-hatch-flash {
    position: absolute; inset: -10px; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, #fff, transparent 65%); animation: pet-flash 0.7s ease-out forwards;
}
@keyframes pet-flash { from { opacity: 1; transform: scale(0.4); } to { opacity: 0; transform: scale(1.4); } }
.pet-hatch-title { display: flex; align-items: center; gap: 0.5rem; font-size: 1.15rem; }
.pet-hatch-text { line-height: 1.5; }
.pet-hatch-form { display: flex; gap: 0.5rem; width: 100%; }
.pet-hatch-form input { flex: 1; min-width: 0; text-align: center; font-weight: 600; }

/* ---------- Kapisma: secim ve rakipler ---------- */
.pb-pick { display: flex; gap: 0.45rem; overflow-x: auto; padding-bottom: 0.3rem; margin-bottom: 0.8rem; }
.pb-mine {
    display: flex; align-items: center; gap: 0.45rem; flex: none; padding: 0.4rem 0.7rem 0.4rem 0.45rem;
    border-radius: 12px; border: 1.5px solid var(--border); background: var(--bg-panel);
    color: var(--text-main); font: inherit; cursor: pointer; text-align: left;
}
.pb-mine > span:last-child { display: flex; flex-direction: column; font-size: 0.82rem; }
.pb-mine small { color: var(--text-muted); font-size: 0.7rem; display: inline-flex; align-items: center; gap: 0.15rem; }
.pb-mine small .i { width: 11px; height: 11px; }
.pb-mine.active { border-color: var(--rc); background: color-mix(in srgb, var(--rc) 12%, var(--bg-panel)); }
.pb-opponents { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.7rem; max-height: 42vh; overflow-y: auto; }
.pb-group-title, .pb-history-title {
    display: flex; align-items: center; gap: 0.35rem;
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--text-muted); margin: 0.5rem 0 0.15rem;
}
.pb-history-title { margin-top: 1.1rem; }
.pb-history-title .i { width: 14px; height: 14px; }
.pb-opp {
    display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.55rem; border-radius: 10px;
    background: var(--bg-panel); border-left: 3px solid var(--rc);
}
.pb-opp-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.pb-opp-name { display: flex; align-items: center; gap: 0.35rem; min-width: 0; }
.pb-opp-name b { font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-opp-info small { color: var(--text-muted); font-size: 0.74rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-opp-info small .i { width: 11px; height: 11px; vertical-align: -1px; }
.pb-odds { font-size: 0.7rem; font-weight: 700; padding: 2px 7px; border-radius: 8px; flex: none; }
.pb-odds.easy { color: var(--ok-text); background: rgba(34,197,94,0.14); }
.pb-odds.even { color: var(--text-muted); background: rgba(var(--ov), 0.08); }
.pb-odds.mid { color: var(--warn-text); background: rgba(245,158,11,0.14); }
.pb-odds.hard { color: var(--danger-text); background: rgba(239,68,68,0.14); }
.pb-history { display: flex; flex-direction: column; gap: 0.3rem; }
.pb-hist { display: flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.5rem; border-radius: 9px; background: var(--bg-panel); font-size: 0.8rem; }
.pb-hist-vs { color: var(--text-muted); font-size: 0.7rem; font-weight: 700; }
.pb-hist-text { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.3rem; }
.pb-hist-text small { color: var(--text-muted); font-size: 0.7rem; }
.pb-hist-res { font-size: 0.72rem; font-weight: 700; flex: none; }
.pb-hist-res.win { color: var(--ok-text); }
.pb-hist-res.loss { color: var(--danger-text); }
.pb-hist-res.self { color: var(--text-muted); }

/* ---------- Kapisma arenasi ---------- */
.pb-arena {
    position: relative; overflow: hidden; width: 100%; max-width: 560px;
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 0.5rem;
    padding: 1rem 0.8rem 16px; border-radius: 16px;
    background:
        linear-gradient(to bottom, transparent 88%, #15803d 88%, #15803d 92%, #713f12 92%),
        linear-gradient(to bottom, #312e81, #7c3aed 55%, #f472b6);
}
.pb-side { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; color: #fff; }
.pb-side.b { text-align: right; align-items: flex-end; }
.pb-name { display: flex; align-items: center; gap: 0.35rem; font-size: 0.95rem; text-shadow: 0 1px 2px rgba(0,0,0,0.6); }
.pb-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-side.b .pb-name { flex-direction: row-reverse; }
.pb-owner { font-size: 0.72rem; opacity: 0.85; text-shadow: 0 1px 2px rgba(0,0,0,0.6); }
.pb-hp { width: 100%; height: 9px; border-radius: 5px; background: rgba(0,0,0,0.4); overflow: hidden; border: 1px solid rgba(255,255,255,0.35); }
.pb-hp > span { display: block; height: 100%; background: #4ade80; transition: width 0.35s var(--e-out), background 0.3s; }
.pb-side.b .pb-hp > span { margin-left: auto; }
.pb-hp > span.low { background: #ef4444; }
.pb-hp-text { font-size: 0.68rem; opacity: 0.9; font-variant-numeric: tabular-nums; }
.pb-fighter { position: relative; display: flex; justify-content: center; align-items: flex-end; height: 110px; margin-top: 0.3rem; }
.pb-fighter .pet-art { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--rc) 70%, transparent)); }
.pb-vs { align-self: center; font-weight: 800; font-size: 1.3rem; color: #fde68a; text-shadow: 0 2px 0 #7c2d12, 0 0 12px rgba(253,230,138,0.6); }
.pb-side.a .pb-fighter.lunge { animation: pb-lunge-r 0.32s var(--e-out); }
.pb-side.b .pb-fighter.lunge { animation: pb-lunge-l 0.32s var(--e-out); }
@keyframes pb-lunge-r { 50% { transform: translateX(28px) scale(1.06); } }
@keyframes pb-lunge-l { 50% { transform: translateX(-28px) scale(1.06); } }
.pb-fighter.hit .pet-art { animation: pb-hit 0.4s ease-out; }
@keyframes pb-hit { 0%, 100% { transform: translateX(0); filter: none; } 20% { transform: translateX(-5px); filter: brightness(2.2); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); filter: brightness(1.6); } }
.pb-side.a .pb-fighter.dodge .pet-art { animation: pb-dodge-l 0.4s ease-out; }
.pb-side.b .pb-fighter.dodge .pet-art { animation: pb-dodge-r 0.4s ease-out; }
@keyframes pb-dodge-l { 50% { transform: translateX(-18px); opacity: 0.6; } }
@keyframes pb-dodge-r { 50% { transform: translateX(18px); opacity: 0.6; } }
.pb-fighter.win .pet-art { animation: pet-strip 0.5s steps(1, end) infinite, pb-cheer 0.6s ease-in-out infinite; }
@keyframes pb-cheer { 50% { transform: translateY(-14px); } }
.pb-fighter.faint .pet-art { transform: rotate(90deg) translateX(18%); filter: grayscale(0.7) brightness(0.8); transition: transform 0.4s var(--e-out); }
.pb-pop {
    position: absolute; top: 0; left: 50%; transform: translateX(-50%); pointer-events: none;
    font-weight: 800; font-size: 1.1rem; color: #fff; text-shadow: 0 2px 0 #000, 0 0 6px #000;
    animation: pb-pop 0.9s ease-out forwards;
}
.pb-pop.crit { color: #fde047; font-size: 1.4rem; }
.pb-pop.miss { color: #bae6fd; font-size: 0.9rem; }
@keyframes pb-pop { from { opacity: 1; transform: translate(-50%, 10px) scale(0.7); } 30% { transform: translate(-50%, -6px) scale(1.15); } to { opacity: 0; transform: translate(-50%, -30px); } }
.pb-text { min-height: 2.6em; max-width: 560px; text-align: center; font-size: 0.92rem; line-height: 1.4; }
.pet-overlay-panel.won .pb-text b:first-child { color: var(--ok-text); }
.pb-buttons { display: flex; gap: 0.5rem; }
.pb-confetti {
    position: absolute; top: -10px; left: var(--x); width: 6px; height: 9px; background: var(--c);
    animation: pb-fall 1.6s var(--d) ease-in forwards; pointer-events: none;
}
@keyframes pb-fall { to { transform: translateY(240px) rotate(540deg); opacity: 0.2; } }
:root[data-motion="reduce"] .pb-fighter .pet-art, :root[data-motion="reduce"] .pb-fighter.lunge { animation: none !important; }

/* ---------- Profil kartinda ---------- */
.pv-pets { margin: 0.9rem 0 0.2rem; padding: 0.7rem; border-radius: 12px; background: var(--bg-panel); display: flex; flex-direction: column; gap: 0.5rem; }
.pv-pets-title { display: flex; align-items: center; gap: 0.35rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.pv-pets-title .i { width: 14px; height: 14px; color: #f59e0b; }
.pv-pets-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pv-pet { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; width: 58px; }
.pv-pet .pet-art { filter: drop-shadow(0 0 4px color-mix(in srgb, var(--rc) 60%, transparent)); }
.pv-pet small { font-size: 0.68rem; color: var(--text-muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-pets .btn { align-self: flex-start; }

@media (max-width: 600px) {
    .pets-grid { grid-template-columns: 1fr; }
    .pet-card { padding: 0.7rem; gap: 0.6rem; }
    .pet-card-art { width: 68px; height: 68px; }
    .pb-fighter { height: 90px; }
    .pb-arena { padding: 0.8rem 0.5rem 0.5rem; }
}