.pearl-modal { max-width: 490px; background: var(--card); }
.pearl-modal .modal-body { padding: 14px 12px 12px; }
.pearl-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-right: 34px; font-size: 13px; }
.pearl-heading > span { white-space: nowrap; color: var(--brown); background: var(--pink-soft); border-radius: 12px; padding: 4px 8px; }
.pearl-scoreboard { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 5px; margin: 10px 0 8px; }
.pearl-scoreboard > div { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 59px; border-radius: 13px; background: var(--card2); border: 1px solid var(--line); }
.pearl-scoreboard > div:first-child { background: linear-gradient(135deg,#fff0b0,#ffd385); color: #794717; border-color: #f2c56b; }
.pearl-scoreboard small { font-size: 8px; font-weight: 800; letter-spacing: .3px; color: var(--muted); }
.pearl-scoreboard b { display: inline-block; font-size: 21px; line-height: 1.3; }
.pearl-scoreboard #pScore { font-size: 28px; }
.pearl-scoreboard #pLastGain { color: var(--green); font-size: 17px; }
.pearl-progress > span { display: flex; justify-content: space-between; font-size: 11px; margin-bottom: 4px; }
.pearl-progress .goal-bar { height: 8px; background: var(--pink-soft); }
.pearl-progress .goal-bar i { background: linear-gradient(90deg,#ffa751,#ffd15b); }
.pearl-progress .time-bar { height: 4px; margin-top: 5px; }
.pearl-combo-row { display: flex; align-items: center; gap: 10px; min-height: 30px; }
.pearl-combo-row .pcombo { font-size: 13px; min-width: 100px; text-align: left; }
.combo-bar { flex: 1; height: 4px; }
.combo-bar i { background: linear-gradient(90deg,#f47ca9,#b083e6); transition: width .12s linear; }
.pearl-stage { position: relative; padding: 7px; border-radius: 18px; background: linear-gradient(145deg,var(--pink-soft),var(--bg)); box-shadow: inset 0 1px 5px rgba(90,45,50,.12); }
.pearl-stage .pboard { gap: 5px; position: relative; }
.pearl-modal .pearl-cell { aspect-ratio: 1; min-width: 0; border: 1px solid var(--line); border-radius: 14px; padding: 1px; background: var(--card); box-shadow: 0 2px 0 rgba(100,70,55,.1); overflow: visible; }
.pearl-modal .pearl-character { width: 100%; height: 100%; margin: 0; background: none; border: 0; box-shadow: none; border-radius: 0; }
.pearl-icon { display: block; width: 100%; height: 100%; overflow: visible; }
.pearl-character > .pearl-icon { animation: pearlFloat 2.6s ease-in-out infinite; animation-delay: var(--float-delay); }
.pearl-cell:hover { border-color: var(--pink); }
.pearl-popping .pearl-character { animation: pearlPopOut .16s ease-in forwards; }
.pearl-fx { position: absolute; inset: 0; z-index: 8; pointer-events: none; }
.pearl-fx .pfx-ring, .pearl-fx .pfx-dot { position: absolute; z-index: 1; }
.pearl-fx .pfx-mega { width: 30px; height: 30px; border: 2px solid; border-radius: 50%; box-shadow: 0 0 15px currentColor, inset 0 0 10px currentColor; }
.pearl-fx .pfx-dot { color: #fff0b4; font-size: 13px; line-height: 1; }
.pearl-gain { position: absolute; z-index: 3; font-size: 29px; font-weight: 900; color: #fff5bc; text-shadow: 0 2px 0 #ab6441,1px 0 #ab6441,-1px 0 #ab6441; white-space: nowrap; }
.pearl-gain small { display: block; font-size: 11px; text-align: center; color: white; }
.pearl-score-flight { position: absolute; color: #ffe36e; font-size: 22px; text-shadow: 0 0 10px #f4ae4e; }
.pearl-calculation { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px; font-size: 10px; padding: 8px 2px 0; color: var(--muted); }
.pearl-calculation > b { color: var(--brown); }
.pearl-preview { display: flex; justify-content: center; gap: 4px; margin: 8px 0 16px; }
.pearl-preview .pearl-icon { width: 16%; max-width: 62px; }
.reward-pearl { display: inline-block; width: 26px; height: 26px; vertical-align: middle; margin-right: 5px; }
.time-warning #pTime { color: var(--red); }
.time-warning .time-bar i { background: var(--red); }
@keyframes pearlFloat { 50% { transform: translateY(-2px) rotate(3deg); } }
@keyframes pearlPopOut { 35% { transform: scale(1.2,.85); opacity: 1; } 100% { transform: scale(.2); opacity: 0; } }
@media (max-height: 650px) { .pearl-scoreboard > div { min-height: 46px; } .pearl-modal .modal-body { padding-top: 8px; } .pearl-scoreboard { margin: 7px 0; } }