/* Cartão do status de 24h — usado no site e na prévia do painel */
.sc { position: relative; overflow: hidden; container-type: inline-size; aspect-ratio: 9 / 16; border-radius: 16px; background: #222; isolation: isolate; user-select: none; }
.sc-bg { position: absolute; inset: 0; z-index: 0; }
.sc-media { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.sc-media--contain { object-fit: contain; }
.sc-media--cover { object-fit: cover; }
.sc-fx { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.sc-fx span { position: absolute; top: -10%; animation: sc-fall linear infinite; text-shadow: 0 0 4px rgba(255,255,255,.6); }
.sc-fx--bubbles span, .sc-fx--hearts span { top: auto; bottom: -10%; animation-name: sc-rise; }
.sc-fx--sparkles span, .sc-fx--stars span { animation-name: sc-twinkle; }
.sc-fx--sparkles span:nth-child(odd), .sc-fx--stars span:nth-child(odd) { top: 20%; } .sc-fx--sparkles span:nth-child(3n), .sc-fx--stars span:nth-child(3n) { top: 55%; } .sc-fx--sparkles span:nth-child(4n), .sc-fx--stars span:nth-child(4n) { top: 80%; } .sc-fx--sparkles span, .sc-fx--stars span { top: 8%; }
@keyframes sc-fall { to { transform: translate(20px, 120cqh) rotate(300deg); } }
@keyframes sc-rise { to { transform: translate(-15px, -120cqh); opacity: 0; } }
@keyframes sc-twinkle { 0%, 100% { opacity: 0; transform: scale(.4); } 50% { opacity: 1; transform: scale(1.1); } }
.sc { container-type: size; }
.sc-sticker { position: absolute; z-index: 3; transform: translate(-50%, -50%) rotate(var(--rot, 0deg)); }
.sc-sticker img { display: block; width: 100%; height: auto; pointer-events: none; }
.sc-emoji { display: block; text-align: center; line-height: 1; }
.sc-anim--float { animation: sc-float 3s ease-in-out infinite; }
.sc-anim--spin { animation: sc-spin 6s linear infinite; }
.sc-anim--pulse { animation: sc-pulse 1.4s ease-in-out infinite; }
.sc-anim--wiggle { animation: sc-wiggle 1.2s ease-in-out infinite; }
.sc-anim--bounce { animation: sc-bounce 1s ease-in-out infinite; }
@keyframes sc-float { 50% { transform: translateY(-6%); } }
@keyframes sc-spin { to { transform: rotate(360deg); } }
@keyframes sc-pulse { 50% { transform: scale(1.12); } }
@keyframes sc-wiggle { 25% { transform: rotate(-10deg); } 75% { transform: rotate(10deg); } }
@keyframes sc-bounce { 50% { transform: translateY(-14%); } }
.sc-text { position: absolute; left: 6%; right: 6%; z-index: 4; display: flex; flex-direction: column; }
.sc-text--top { top: 12%; } .sc-text--middle { top: 50%; transform: translateY(-50%); } .sc-text--bottom { bottom: 12%; }
.sc-words { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.2; display: inline-block; }
.sc-text[style*="center"] .sc-words { align-self: center; } .sc-text[style*="right"] .sc-words { align-self: flex-end; } .sc-text[style*="left"] .sc-words { align-self: flex-start; }
.sc-box--band { background: color-mix(in srgb, var(--box) 70%, transparent); padding: .25em .6em; border-radius: .2em; }
.sc-box--bubble { background: var(--box); padding: .35em .8em; border-radius: 1.2em; box-shadow: 0 .15em .4em rgba(0,0,0,.15); }
.sc-box--note { background: var(--box); padding: .5em .7em; transform: rotate(-2deg); box-shadow: .15em .2em 0 rgba(0,0,0,.15); }
.sc-eff--shadow { text-shadow: 0 .06em .18em rgba(0,0,0,.45); }
.sc-eff--outline { -webkit-text-stroke: .08em var(--eff); paint-order: stroke fill; }
.sc-eff--glow { text-shadow: 0 0 .25em var(--eff), 0 0 .6em var(--eff); }
.sc-eff--retro { text-shadow: .07em .07em 0 var(--eff), .14em .14em 0 rgba(0,0,0,.2); }
.sc-tanim--fade { animation: sc-fade 1s ease both; }
.sc-tanim--bounce { animation: sc-bounce 1.2s ease-in-out infinite; }
.sc-tanim--pulse { animation: sc-pulse 1.6s ease-in-out infinite; }
.sc-tanim--type { animation: sc-type 2s steps(28) both; }
.sc-tanim--wave span { display: inline-block; animation: sc-bounce 1.4s ease-in-out infinite; }
@keyframes sc-fade { from { opacity: 0; transform: translateY(12%); } }
@keyframes sc-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.sc-link { position: absolute; z-index: 6; left: 50%; bottom: 5%; transform: translateX(-50%); background: #fff; color: #c2577f; font: 700 max(12px, 3.6cqw) system-ui, sans-serif; padding: .5em 1.2em; border-radius: 999px; box-shadow: 0 .2em .6em rgba(0,0,0,.2); text-decoration: none; white-space: nowrap; }
.sc-link:hover { text-decoration: none; filter: brightness(.97); }
@media (prefers-reduced-motion: reduce) { .sc-fx, .sc [class*="sc-anim--"], .sc [class*="sc-tanim--"] { animation: none !important; } }