/* Compact mobile canvas: preserve all existing visual elements in a 540 × 1015 viewport. */
.phone { height: calc(var(--phone) * 1.88); }
@media (max-width: 470px) {
  .phone { height: calc(min(var(--phone), calc(100vw - 22px)) * 1.88); }
}

/* Keep the full result stack inside the shorter canvas. */
.result .reveal-card { top: 43%; width: 272px; height: 386px; }
.result-panel { top: calc(43% + 198px); }
.result-panel .price-tag { margin-bottom: 7px; }
.result-panel .price-tag i { font-size: 29px; }
.result-panel .price-char { font-size: 44px; }
.result-panel strong { font-size: 21px; }
.result-panel span { margin-top: 4px; font-size: 10px; }
.result-actions { margin-top: 10px; }
.result-actions button { min-height: 44px; }

@media (max-width: 470px) {
  .result .reveal-card { top: 42%; width: 260px; height: 370px; }
  .result-panel { top: calc(42% + 188px); }
  .result-panel .price-tag i { font-size: 27px; }
  .result-panel .price-char { font-size: 40px; }
  .result-panel strong { font-size: 20px; }
}

/* A complete card flies from the blast core; no thin WebGL card intermediary. */
.result .reveal-card {
  animation: directCardFromBlast .58s cubic-bezier(.08,.88,.17,1) both !important;
  transform-origin: 50% 50%;
}
@keyframes directCardFromBlast {
  0% { opacity:0; transform:translate(-50%,calc(-50% + 115px)) scale(.28); filter:brightness(2.25) blur(2px); }
  18% { opacity:1; transform:translate(-50%,calc(-50% + 58px)) scale(.56); filter:brightness(1.45) blur(.6px); }
  72% { opacity:1; transform:translate(-50%,calc(-50% - 7px)) scale(1.04); filter:brightness(1.06) blur(0); }
  100% { opacity:1; transform:translate(-50%,-50%) scale(1); filter:brightness(1) blur(0); }
}