/* Mass-RO — motion & mobile menu (shared by every page) */

html,body{overflow-x:hidden}
@supports (overflow:clip){html,body{overflow-x:clip}}

/* ---------- loading screen ---------- */
#msLoader{position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;background:radial-gradient(600px 400px at 50% 40%,#2a5bb8,#0e1a3a);transition:opacity .5s,visibility .5s}
#msLoader.done{opacity:0;visibility:hidden}
#msLoader img{width:min(260px,60vw);animation:ldPulse 1.6s ease-in-out infinite}
#msLoader .ld-txt{color:#ffe39a;font:600 15px "Kanit",Tahoma,sans-serif;letter-spacing:2px}
#msLoader .ld-bar{width:min(260px,64vw);height:12px;border-radius:10px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.35);overflow:hidden}
#msLoader .ld-bar i{display:block;height:100%;width:0;border-radius:10px;background:linear-gradient(90deg,#4f86e6,#ffe39a);transition:width .25s}
@keyframes ldPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}

/* ---------- scroll reveal ---------- */
.fx{opacity:0;transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0s);will-change:opacity,transform}
.fx-up{transform:translateY(40px)}
.fx-left{transform:translateX(-60px)}
.fx-right{transform:translateX(60px)}
.fx-zoom{transform:scale(.85)}
.fx-pop{transform:scale(.4)}
.fx.in{opacity:1;transform:none}
.fx:not(.in){transition-delay:0s;transition-duration:.45s}
@media (prefers-reduced-motion:reduce){.fx{opacity:1;transform:none;transition:none}}

/* ---------- bouncy buttons ---------- */
.sidebtn,.cat,.navbtn,.btn-gold,.logo,.playcard,.card__foot a,.ms-btn,.ms-nav__tabs a,.topnav__tabs a{transition:transform .25s cubic-bezier(.3,1.6,.5,1),box-shadow .25s,border-color .2s}
.sidebtn:hover,.cat:hover,.btn-gold:hover{transform:translateY(-4px) scale(1.03)}
.sidebtn:active,.cat:active,.btn-gold:active,.navbtn:active,.ms-btn:active{transform:scale(.95)}
.sidebtn:hover i{animation:wiggle .5s ease}
.navbtn--dl,.ms-btn--dl{animation:dlBob 2.4s ease-in-out infinite}
.navbtn--dl:hover,.ms-btn--dl:hover{animation:none;transform:translateY(3px)}
.logo:hover .logo__img{animation:jelly .6s ease}
.card{transition:transform .3s cubic-bezier(.3,1.4,.5,1),box-shadow .3s}
.card:hover{transform:translateY(-6px);box-shadow:0 14px 28px rgba(14,26,58,.22)}
.card img{transition:transform .5s}
.card:hover img{transform:scale(1.06)}
.show__art img{animation:float 4s ease-in-out infinite}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-12deg)}75%{transform:rotate(12deg)}}
@keyframes dlBob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
@keyframes jelly{0%{transform:scale(1)}30%{transform:scale(1.15,.9)}50%{transform:scale(.92,1.08)}70%{transform:scale(1.05,.97)}100%{transform:scale(1)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

/* ---------- mobile: compact top bar + MENU drawer ---------- */
@media (max-width:760px){
  .burger,.ms-burger{display:none!important}
  .mbar{position:fixed;top:0;left:0;right:0;z-index:70;height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;background:linear-gradient(180deg,#24418a,#11214d);box-shadow:0 4px 14px rgba(0,0,0,.3);transition:transform .3s}
  .mbar.hide{transform:translateY(-100%)}
  .mbar img{height:34px;width:auto}
  .mbar button{display:flex;align-items:center;gap:6px;height:34px;padding:0 14px;border-radius:8px;border:1px solid rgba(255,255,255,.55);background:rgba(255,255,255,.06);color:#fff;font:600 14px "Kanit",Tahoma,sans-serif;cursor:pointer}
  .mbar button b{font-size:18px;line-height:1;transition:transform .3s}
  .mbar.open button b{transform:rotate(90deg)}
  body{padding-top:52px}
  .topnav,.ms-nav{position:fixed!important;top:52px!important;left:0;right:0;z-index:65;padding:0!important;display:block!important;pointer-events:none}
  .topnav__bar,.ms-nav__bar{display:flex!important;flex-direction:column;height:auto!important;border-radius:0 0 16px 16px!important;padding:10px 12px 14px!important;gap:6px;transform:translateY(-110%);opacity:0;transition:transform .4s cubic-bezier(.2,.9,.3,1.2),opacity .3s;pointer-events:auto}
  .topnav.open .topnav__bar,.ms-nav.open .ms-nav__bar{transform:none;opacity:1}
  .topnav .navbtn,.ms-nav .ms-btn{width:100%;padding:10px!important;border-radius:10px;background:rgba(255,255,255,.06);opacity:0;transform:translateY(-10px);transition:opacity .3s,transform .3s}
  .topnav.open .navbtn,.ms-nav.open .ms-btn{opacity:1;transform:none}
  .topnav.open .navbtn:nth-child(2),.ms-nav.open .ms-btn:nth-child(2){transition-delay:.05s}
  .topnav.open .navbtn:nth-child(3),.ms-nav.open .ms-btn:nth-child(3){transition-delay:.1s}
  .topnav.open .navbtn:nth-child(4),.ms-nav.open .ms-btn:nth-child(4){transition-delay:.15s}
  .topnav.open .navbtn:nth-child(5),.ms-nav.open .ms-btn:nth-child(5){transition-delay:.2s}
  .topnav .navbtn--dl,.ms-nav .ms-btn--dl{margin:2px 0!important;width:100%!important;height:auto!important;border-radius:10px!important;animation:none;background:linear-gradient(180deg,#fff2c2,#f2c14e 70%,#c98e22)!important}
  .topnav .navbtn--dl b,.ms-nav .ms-btn--dl b{color:#0e1a3a!important;font-size:22px}
  .topnav .navbtn--dl small,.ms-nav .ms-btn--dl small{color:#17295a!important}
  .mscrim{position:fixed;inset:52px 0 0 0;z-index:60;background:rgba(0,0,0,.45);opacity:0;visibility:hidden;transition:.3s}
  .mscrim.on{opacity:1;visibility:visible}
  /* side menus 2 columns like a button grid */
  .grid3 .side{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .sidebtn{padding:10px 10px}
  .sidebtn b{font-size:15px}
  .sidebtn i{width:40px;height:40px;font-size:20px}
  .news__side{grid-template-columns:1fr 1fr!important}
}

/* ---------- top menu locked to the screen ---------- */
@media (min-width:761px){
  /* แถบโลโก้ + MENU ใช้เฉพาะมือถือ: บนคอมซ่อน ภาพ head จะชิดขอบบนสุด */
  .mbar,.mscrim{display:none!important}
  .topnav,.ms-nav{position:fixed!important;top:0;left:0;right:0;z-index:80;transition:padding .3s}
  .topnav__bar,.ms-nav__bar{transition:height .3s,border-radius .3s,box-shadow .3s}
  .navbtn--dl,.ms-btn--dl{transition:height .3s,margin .3s,padding .3s}
  .topnav__tabs,.ms-nav__tabs{transition:opacity .25s,transform .25s}
  /* compact bar after scrolling */
  .topnav.stuck,.ms-nav.stuck{padding-top:6px}
  .stuck .topnav__bar,.stuck .ms-nav__bar{height:54px;box-shadow:0 8px 24px rgba(0,0,0,.45)}
  .stuck .navbtn b,.stuck .ms-btn b{font-size:17px}
  .stuck .navbtn small,.stuck .ms-btn small{font-size:11px}
  .topnav.stuck .navbtn--dl,.ms-nav.stuck .ms-btn--dl{height:68px;margin-top:-6px}
  .stuck .navbtn--dl b,.stuck .ms-btn--dl b{font-size:24px}
  .stuck .topnav__tabs,.stuck .ms-nav__tabs{opacity:0;transform:translateY(-12px);pointer-events:none}
}
/* โลโก้ใหม่ในแถบมือถือ */
@media (max-width:760px){.mbar img{height:38px;width:auto;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}}
#msLoader img{width:min(320px,72vw);filter:drop-shadow(0 6px 16px rgba(0,0,0,.45)) drop-shadow(0 0 18px rgba(255,214,120,.35))}