.mana { display: inline-flex; gap: 2px; flex-wrap: wrap; vertical-align: middle; }
        .pip { display: inline-flex; width: 17px; height: 17px; border-radius: 50%; font-size: 10px; font-weight: 700; align-items: center; justify-content: center; color: #111; background: #cbd5e1; border: 1px solid rgba(0,0,0,.35); }
        .pip-W { background: #fff7d6; } .pip-U { background: #93c5fd; } .pip-B { background: #1e293b; color: #f1f5f9; }
        .pip-R { background: #fca5a5; } .pip-G { background: #86efac; } .pip-C { background: #e2e8f0; }
        .pip-hybrid { position: relative; overflow: hidden; }
        .pip-hybrid i { position: absolute; font-style: normal; font-size: 7px; font-weight: 800; line-height: 1; transform: translate(-50%,-50%); }
        .pip-hybrid i:first-of-type { top: 30%; left: 30%; }
        .pip-hybrid i:last-of-type { top: 70%; left: 70%; }
        .pip-wide { width: auto; min-width: 17px; padding: 0 4px; border-radius: 9px; font-size: 9px; }
        .guide-page .pip { width: 15px; height: 15px; font-size: 9px; }
        .guide-page .pip-hybrid i, .effect-text .pip-hybrid i { font-size: 6px; }
        .guide-page .pip-wide { min-width: 15px; padding: 0 3px; font-size: 8px; }
        .signature-cost .pip { vertical-align: -2px; }
        .effect-text .pip { width: 15px; height: 15px; font-size: 9px; vertical-align: -2px; }
        .effect-text .pip-wide { width: auto; min-width: 15px; padding: 0 3px; font-size: 8px; }