.mobile-principal { position: relative; isolation: isolate; overflow: hidden; background-image: radial-gradient(ellipse 90% 45% at 50% 0%, hsl(var(--primary) / .22), transparent 70%), radial-gradient(ellipse 70% 40% at 85% 55%, hsl(var(--primary) / .28), transparent 65%), radial-gradient(ellipse 60% 30% at 10% 100%, hsl(var(--gold) / .12), transparent 70%); }
.mobile-principal::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, hsl(var(--gold) / .6), transparent); }
.mobile-principal-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; opacity: .15; pointer-events: none; }
.mobile-principal .bx-title { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0; width: 100%; font-size: clamp(52px, 21vw, 88px); line-height: .92; letter-spacing: -.035em; white-space: normal; background: none; animation: none; color: inherit; overflow-wrap: anywhere; filter: drop-shadow(0 0 22px hsl(var(--primary) / .35)); }
.mobile-principal .bx-title .bx-word { isolation: isolate; max-width: 100%; padding: 0 .05em .09em; }
.mobile-principal .bx-gold .ex { color: hsl(34 38% 22%); text-shadow: 0 1px 0 hsl(var(--gold) / .85), 0 3px 0 hsl(34 42% 32%), 0 6px 0 hsl(28 38% 20%), 0 11px 18px hsl(var(--background) / .9); }
.mobile-principal .bx-pink .ex { color: hsl(335 58% 19%); text-shadow: 0 1px 0 hsl(var(--accent) / .8), 0 3px 0 hsl(337 54% 36%), 0 6px 0 hsl(335 56% 22%), 0 11px 18px hsl(var(--background) / .9); }
.mobile-principal .bx-word .rim { -webkit-text-stroke-width: 1px; opacity: .8; }
.mobile-principal .bx-word .face { filter: drop-shadow(0 1px 0 hsl(var(--foreground) / .45)); }
.mobile-principal .bx-word .sh, .mobile-principal .bx-word .bev { display: none; }
.mobile-principal-tagline { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; background: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--accent)), hsl(var(--gold))); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mobile-principal-scene { position: relative; display: flex; align-items: flex-end; min-height: 250px; }
.mobile-principal-frame { position: absolute; right: -1.75rem; bottom: 0; width: 60%; height: 270px; pointer-events: none; }
.mpf-glow { position: absolute; left: 50%; top: 18px; width: 210px; height: 210px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, hsl(var(--primary) / .55) 0%, hsl(var(--gold) / .18) 45%, transparent 70%); filter: blur(22px); }
.mpf-ring { position: absolute; left: 50%; top: 30px; width: 180px; height: 180px; margin-left: -90px; border-radius: 50%; border: 1px solid hsl(var(--gold) / .35); background: conic-gradient(from 0deg, transparent, hsl(var(--primary) / .28), transparent 40%, hsl(var(--gold) / .28), transparent 75%); animation: mpf-spin 30s linear infinite; }
@keyframes mpf-spin { to { transform: rotate(360deg); } }
.mpf-ground { position: absolute; left: 50%; bottom: 12px; width: 170px; height: 20px; transform: translateX(-50%); border-radius: 50%; background: hsl(0 0% 0% / .7); filter: blur(8px); }
.mpf-pedestal { position: absolute; left: 50%; bottom: 0; width: 150px; height: 10px; transform: translateX(-50%); border: 1px solid hsl(var(--gold) / .45); border-bottom: 0; border-radius: .75rem .75rem 0 0; background: linear-gradient(180deg, hsl(var(--card)), hsl(var(--background))); box-shadow: 0 -6px 18px -6px hsl(var(--primary) / .55); }
.mobile-principal-frame .mobile-principal-model { right: auto; left: 0; width: 100%; height: 262px; bottom: 8px; }
.mobile-principal-halo { position: absolute; right: -22%; bottom: 18px; width: 80%; aspect-ratio: 1; border-radius: 50%; border: 1px solid hsl(var(--gold) / .25); background: radial-gradient(circle, hsl(var(--primary) / .5) 0%, hsl(var(--gold) / .14) 45%, transparent 70%); box-shadow: inset 0 0 40px hsl(var(--primary) / .25); pointer-events: none; }
.mobile-principal-halo::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: -14px; height: 18px; border-radius: 50%; background: hsl(var(--background) / .85); filter: blur(8px); }
.mobile-principal-model { position: absolute; right: -2.9rem; bottom: 0; width: 64%; height: 265px; -o-object-fit: contain; object-fit: contain; -o-object-position: bottom center; object-position: bottom center; mask-image: radial-gradient(ellipse 60% 70% at 50% 45%, #000 62%, transparent 100%); -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 45%, #000 62%, transparent 100%); pointer-events: none; filter: brightness(1.05) saturate(1.08) drop-shadow(0 0 18px hsl(var(--primary) / .45)); }
.mobile-principal-desc { position: relative; z-index: 10; max-width: 58%; align-self: flex-start; margin-top: 40px; margin-bottom: 0; overflow: hidden; padding: .95rem; border: 1px solid hsl(var(--gold) / .55); border-radius: 1rem; background: linear-gradient(145deg, hsl(var(--background) / .97), hsl(var(--card) / .88)); font-size: 12.5px; line-height: 1.55; color: hsl(var(--foreground) / .92); box-shadow: inset 0 1px 0 hsl(var(--gold) / .24), inset 0 0 0 1px hsl(var(--primary) / .16), 0 0 0 3px hsl(var(--background) / .82), 0 16px 34px -17px hsl(var(--primary) / .9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.mobile-principal-desc::before { content: ""; position: absolute; inset: .35rem; border: 1px solid hsl(var(--primary) / .4); border-radius: .72rem; pointer-events: none; }
.mobile-principal-desc::after { content: "✦"; position: absolute; top: .2rem; right: .45rem; color: hsl(var(--gold)); font-size: .65rem; text-shadow: 0 0 10px hsl(var(--gold) / .8); }
.mobile-principal-stat { border-radius: .9rem; border: 1px solid hsl(var(--gold) / .2); background: linear-gradient(180deg, hsl(var(--foreground) / .05), hsl(var(--foreground) / .01)); padding: .6rem .25rem; }