/* ssrfx.css — เอฟเฟกต์ SSR: ฉากเปิดตัวตอนสุ่มได้ · แสงตอนถึงตา · พายุซากุระ (ssrfx.js) */
.ssr-petals{position:fixed;inset:0;width:100vw;height:100vh;z-index:9300;pointer-events:none}

/* ---------- ฉากเปิดตัว ---------- */
.ssr-cine{position:fixed;inset:0;z-index:9250;overflow:hidden;background:#07040f;cursor:pointer;animation:ssrIn .25s ease-out;font-family:Sarabun,sans-serif}
.ssr-cine.out{animation:ssrOut .35s ease-in forwards}
@keyframes ssrIn{from{opacity:0}}@keyframes ssrOut{to{opacity:0}}
.ssr-bg{position:absolute;inset:0;background:center/cover no-repeat;opacity:0;filter:blur(14px) brightness(.5);transform:scale(1.15);animation:ssrBg 1.6s 1.05s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes ssrBg{to{opacity:1;filter:blur(0) brightness(.85);transform:scale(1)}}
.ssr-cine::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 55%,transparent 35%,#07040fcc 100%);pointer-events:none}
/* ลำแสงหมุน */
.ssr-rays{position:absolute;left:50%;top:50%;width:220vmax;height:220vmax;margin:-110vmax 0 0 -110vmax;opacity:0;
  background:repeating-conic-gradient(from 0deg,#ffd76a33 0 6deg,transparent 6deg 18deg);-webkit-mask:radial-gradient(circle,#000 0,#0000 45%);mask:radial-gradient(circle,#000 0,#0000 45%);
  animation:ssrRays 1s .15s ease-out forwards,ssrSpin 14s linear infinite}
@keyframes ssrRays{to{opacity:1}}@keyframes ssrSpin{to{transform:rotate(360deg)}}
/* ลูกแสงรวมพลัง → ระเบิดเป็นแสงขาว */
.ssr-orb{position:absolute;left:50%;top:50%;width:18vmin;height:18vmin;margin:-9vmin 0 0 -9vmin;border-radius:50%;
  background:radial-gradient(circle,#fff 0,#ffe7a1 30%,#ff9cc4 60%,transparent 72%);box-shadow:0 0 6vmin 2vmin #ffb3d1aa;transform:scale(.1);animation:ssrOrb 1.1s .1s cubic-bezier(.5,0,.8,.4) forwards}
@keyframes ssrOrb{60%{transform:scale(1)}85%{transform:scale(.8)}100%{transform:scale(6);opacity:0}}
.ssr-flash{position:absolute;inset:0;background:#fff;opacity:0;animation:ssrFlash .7s 1.0s ease-out forwards;pointer-events:none}
@keyframes ssrFlash{0%{opacity:0}15%{opacity:1}100%{opacity:0}}
/* ตัวละคร */
.ssr-ch{position:absolute;left:50%;bottom:0;height:96vh;max-width:70vw;object-fit:contain;object-position:bottom;transform:translate(-62%,8vh) scale(.94);opacity:0;
  filter:drop-shadow(0 0 2.2vh #ffd76acc) drop-shadow(0 0 6vh #ff8fb866);animation:ssrCh 1.1s 1.15s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes ssrCh{to{opacity:1;transform:translate(-62%,0) scale(1)}}
/* ป้าย SSR + ดาว + ชื่อ */
.ssr-info::before{content:"";position:absolute;inset:-4vh -6vw -4vh -4vw;z-index:-1;background:radial-gradient(ellipse at 40% 50%,#0009 0,#0006 45%,transparent 72%)}
.ssr-info{position:absolute;right:6vw;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:flex-start;gap:.6vh;max-width:40vw;z-index:2}
.ssr-tag{font:900 max(44px,15vh)/1 Mali,Sarabun,sans-serif;letter-spacing:.04em;font-style:italic;
  background:linear-gradient(180deg,#fffbe6 0%,#ffe08a 35%,#f2a93b 60%,#fff2b8 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 .5vh 0 #8a4b12) drop-shadow(0 0 2.4vh #ffcf5a);opacity:0;transform:scale(2.4);animation:ssrStamp .45s 1.55s cubic-bezier(.3,1.6,.5,1) forwards}
@keyframes ssrStamp{to{opacity:1;transform:scale(1)}}
.ssr-stars{display:flex;gap:.4vh}
.ssr-stars i{font-style:normal;font-size:max(18px,5vh);color:#ffd76a;text-shadow:0 0 1.2vh #ffb300,0 .3vh 0 #9a5a10;opacity:0;transform:translateY(-1vh) scale(.4);animation:ssrStar .3s cubic-bezier(.3,1.7,.5,1) forwards}
.ssr-stars i:nth-child(1){animation-delay:1.85s}.ssr-stars i:nth-child(2){animation-delay:1.95s}.ssr-stars i:nth-child(3){animation-delay:2.05s}.ssr-stars i:nth-child(4){animation-delay:2.15s}.ssr-stars i:nth-child(5){animation-delay:2.25s}
@keyframes ssrStar{to{opacity:1;transform:none}}
.ssr-info b{font:800 max(22px,6.4vh)/1.15 Mali,Sarabun,sans-serif;color:#fff;text-shadow:0 .4vh 1.2vh #000a,0 0 2vh #ff8fb8;opacity:0;animation:ssrTxt .5s 2.1s ease-out forwards}
.ssr-info small{font:700 max(13px,3vh) Sarabun,sans-serif;color:#ffe3ef;text-shadow:0 .3vh 1vh #000a;opacity:0;animation:ssrTxt .5s 2.25s ease-out forwards}
.ssr-info em{font:800 max(12px,2.6vh) Sarabun,sans-serif;font-style:normal;color:#3b1d00;background:linear-gradient(#fff2b8,#ffc94a);border-radius:99px;padding:.3vh 1.6vh;margin-top:.6vh;opacity:0;animation:ssrTxt .5s 2.4s ease-out forwards}
@keyframes ssrTxt{from{opacity:0;transform:translateX(2vw)}to{opacity:1;transform:none}}
.ssr-tap{position:absolute;left:50%;bottom:3vh;transform:translateX(-50%);z-index:3;font:700 max(12px,2.4vh) Sarabun,sans-serif;color:#fff;background:#0008;border-radius:99px;padding:.6vh 2vh;opacity:0;transition:opacity .3s}
.ssr-cine.ready .ssr-tap{opacity:1;animation:ssrBlink 1.4s ease-in-out infinite}
@keyframes ssrBlink{50%{opacity:.55}}
@media (orientation:portrait){
  .ssr-ch{height:70vh;max-width:96vw;transform:translate(-50%,8vh);animation-name:ssrChP}
  @keyframes ssrChP{to{opacity:1;transform:translate(-50%,0)}}
  .ssr-info{right:auto;left:50%;top:6vh;transform:translateX(-50%);align-items:center;max-width:92vw;text-align:center}
}
/* ลดการเคลื่อนไหว: แสดงฉากนิ่งทันที */
.ssr-cine.still *{animation:none!important;opacity:1!important}
.ssr-cine.still .ssr-orb,.ssr-cine.still .ssr-flash{display:none}
.ssr-cine.still .ssr-bg{filter:brightness(.85);transform:none}
.ssr-cine.still .ssr-ch{transform:translate(-62%,0)}

/* ---------- แสงตอนถึงตา (ที่นั่งของผู้เล่นที่ใช้ตัว SSR) ---------- */
.gxl .gx-sb.ssr::before,.gxl .gx-sb.ssr::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s}
.gxl .gx-sb.ssr::before{background:radial-gradient(ellipse at 50% 55%,#ffd76a88 0,#ff8fb860 38%,transparent 75%);mix-blend-mode:screen}
.gxl .gx-sb.ssr::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='200'%3E%3Cg fill='%23ffc2d8'%3E%3Cpath d='M20 30c6-6 14-2 12 6-4 6-12 4-12-6z' opacity='.9'/%3E%3Cpath d='M110 70c7-5 14 1 10 8-5 5-12 2-10-8z' opacity='.75'/%3E%3Cpath d='M60 140c6-6 13-1 10 6-4 6-11 3-10-6z' opacity='.85'/%3E%3Cpath d='M140 170c5-5 12 0 9 6-4 5-10 2-9-6z' opacity='.7'/%3E%3C/g%3E%3C/svg%3E");background-size:160px 200px}
.gxl .gx-sb.ssr.on::before{opacity:1;animation:ssrGlow 1.8s ease-in-out infinite}
.gxl .gx-sb.ssr.on::after{opacity:.9;animation:ssrFall 6s linear infinite}
.gxl .gx-sb.ssr.on{animation:ssrLit 1.8s ease-in-out infinite}
@keyframes ssrLit{0%,100%{filter:brightness(1.15) saturate(1.15)}50%{filter:brightness(1.45) saturate(1.3)}}
@keyframes ssrGlow{50%{opacity:.7}}
@keyframes ssrFall{from{background-position:0 0}to{background-position:-60px 200px}}
/* ป้ายชื่อของคนที่ถึงตา: วงแหวนทอง */
.gx-seat.ssr.active,.gx-me.ssr.active{box-shadow:0 0 0 .35vh #ffd76a,0 0 3.2vh 1vh #ffb3d1;animation:ssrRing 1.8s ease-in-out infinite;border-radius:1.6vh}
@keyframes ssrRing{50%{box-shadow:0 0 0 .35vh #fff3c4,0 0 4.6vh 1.6vh #ffd76a}}
@media (prefers-reduced-motion:reduce){.gxl .gx-sb.ssr.on{animation:none;filter:brightness(1.2)}.gxl .gx-sb.ssr.on::before,.gxl .gx-sb.ssr.on::after,.gx-seat.ssr.active,.gx-me.ssr.active{animation:none}}