*,*:before,*:after{box-sizing:border-box}html,body{margin:0;height:100%;background:#0f172a;color:#e2e8f0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}#app{min-height:100vh;min-height:calc(var(--vh, 1vh) * 100);display:flex;flex-direction:column;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}.top-bar{flex:0 0 auto;padding:.5rem .75rem;display:flex;align-items:center;gap:.75rem;border-bottom:1px solid #1e293b}.title{margin:0;font-size:1rem;font-weight:600;letter-spacing:.02em}.status{margin:0 0 0 auto;font-size:.8125rem;color:#94a3b8;max-width:60%;text-align:right}.status.error{color:#fca5a5}.stage{flex:1 1 auto;display:flex;min-height:0;padding:.25rem}.player-wrap{flex:1;min-height:0;border-radius:.5rem;overflow:hidden;background:#000;touch-action:manipulation}.ruffle-player,.ruffle-player canvas,.ruffle-player :deep(ruffle-player){width:100%!important;height:100%!important}.foot{flex:0 0 auto;padding:.35rem .75rem .5rem;font-size:.75rem;color:#64748b;text-align:center}.foot p{margin:0}@media(min-width:768px){.title{font-size:1.125rem}.stage{padding:.75rem}}