/* =============================
   css/scenes/start.css
   ============================= */
/* ===== cena: tela de início ===== */
#scene-start{background:#3b9bff;overflow:hidden}
#scene-start .l{left:0;top:0;width:360px;height:640px}

/* céu: raios do sol giram devagar, nuvens passeiam */
#scene-start .rays{transform-origin:180px 330px;animation:stRays 80s linear infinite}
@keyframes stRays{to{transform:rotate(360deg)}}
#scene-start .cl1{animation:stCl 24s ease-in-out infinite alternate}
#scene-start .cl2{animation:stCl 31s ease-in-out infinite alternate-reverse}
#scene-start .cl3{animation:stCl 19s ease-in-out infinite alternate}
#scene-start .cl4{animation:stCl 27s ease-in-out infinite alternate-reverse}
@keyframes stCl{to{translate:46px 0}}

/* placas de campanha balançam ao vento */
#scene-start .sg1,#scene-start .sg2{animation:stSg 3.6s ease-in-out infinite alternate}
#scene-start .sg2{animation-duration:4.8s;animation-delay:-1.5s}
@keyframes stSg{to{rotate:7deg}}
#scene-start .signs>*{transform-box:fill-box}
#scene-start .sg1,#scene-start .sg2{transform-origin:50% 100%}

/* bandeirinhas e título */
#scene-start .bunting{animation:stBun 3.4s ease-in-out infinite alternate;transform-origin:50% 0}
@keyframes stBun{to{transform:skewX(1.4deg)}}
#scene-start .ttl{transform-origin:180px 96px;animation:stTtl 2.6s ease-in-out infinite}
@keyframes stTtl{50%{transform:rotate(-4deg) scale(1.035)}}

/* herói acenando */
#scene-start .hero{left:105px;top:262px;width:150px;height:225px;animation:stHero 3s ease-in-out infinite}
@keyframes stHero{50%{transform:translateY(-4px)}}
#scene-start .hero .char{position:absolute;left:0;top:0;width:150px;height:225px}
#scene-start .hero .sh{position:absolute;left:12px;bottom:-4px;width:126px;height:14px;border-radius:50%;background:#0006;filter:blur(2px)}
#scene-start .hero .ar.r{transform-box:fill-box;transform-origin:30% 6%;animation:stWave .55s ease-in-out infinite alternate}
@keyframes stWave{from{transform:rotate(-14deg)}to{transform:rotate(26deg)}}

/* menu: botão grande + linha de botões menores (alvos de toque >= 48px) */
#scene-start .menu{left:22px;right:22px;top:498px;display:flex;flex-direction:column;gap:10px}
#scene-start .menu .big{min-height:58px;font-size:26px}
#scene-start .menu .row{display:flex;gap:8px}
#scene-start .menu .row .btn{flex:1;min-height:48px;padding:6px 4px;font-size:14px;white-space:nowrap}
#scene-start .menu .snd.off{filter:grayscale(.6)}
#scene-start .foot{left:0;right:0;bottom:8px;text-align:center;font:700 10px "PDDText",sans-serif;color:#2b1d00;opacity:.85}