/* ============================================================
   สุ่มสกิน · หน้าการ์ด + เอฟเฟกต์โชว์ (gacha-fx.js)
   ============================================================
   สีของแต่ละระดับใช้ชุดเดียวทั้งไฟล์ (--mc) — ดาวตก · หลังการ์ดเรือง · กรอบ · จอโชว์
   ต้องพูดสีเดียวกัน ไม่งั้นสีที่ "บอกล่วงหน้า" ตอนดาวตกจะไม่ตรงกับการ์ดที่ได้จริง */
.b-common    { --mc: #CFE3FF; }
.b-rare      { --mc: #4F9BFF; }
.b-legendary { --mc: #FFC23D; }
.b-secret    { --mc: #B45CFF; }
.b-mythic    { --mc: #FF5CDB; }

/* ---------- แถบอัตรา ---------- */
.gc-obar .r-mythic { background: linear-gradient(90deg, #FF5C8A, #FFC23D, #5CFF9D, #5CC8FF, #B45CFF); }
.gc-olb .r-mythic, .gc-sum .r-mythic {
  background: linear-gradient(90deg, #FF4F8B, #F59E0B, #10B981, #3B82F6, #A855F7);
  -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 800;
}

/* ============================================================
   1) ดาวตก
   ============================================================ */
.gc-intro {
  position: absolute; inset: 0; z-index: 99; overflow: hidden;
  cursor: pointer; animation: gci-in .2s ease-out;
}
.gc-intro.out { opacity: 0; transition: opacity .25s ease; }
@keyframes gci-in { from { opacity: 0; } to { opacity: 1; } }
.gci-sky {
  position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 50% 110%, #1B2B6B 0%, #0A1030 45%, #02030A 100%);
}
.gci-stars {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1.2px 1.2px at 23px 31px, #fff, transparent),
    radial-gradient(1px 1px at 87px 140px, #fff, transparent),
    radial-gradient(1.5px 1.5px at 160px 70px, #fff, transparent),
    radial-gradient(1px 1px at 51px 190px, #cfe3ff, transparent),
    radial-gradient(1.2px 1.2px at 190px 160px, #fff, transparent),
    radial-gradient(1px 1px at 130px 15px, #ffe9b0, transparent);
  background-size: 210px 210px;
  animation: gci-tw 2.4s ease-in-out infinite alternate;
}
@keyframes gci-tw { from { opacity: .55; } to { opacity: 1; } }
/* ดาว: หัวสว่างอยู่ซ้าย หางจางไปทางขวา — หมุนให้หางชี้ย้อนทางที่มา (--rot จาก JS) */
.gci-met {
  position: absolute; left: 0; top: 0;
  width: 300px; height: 4px; border-radius: 4px;
  transform-origin: 0 50%;
  background: linear-gradient(90deg, #fff 0%, var(--mc) 12%, transparent 100%);
  filter: drop-shadow(0 0 8px var(--mc)) drop-shadow(0 0 18px var(--mc));
  animation: gci-fly var(--dur, 1s) cubic-bezier(.35,.55,.45,1) forwards;
}
.gci-met b {
  position: absolute; left: -7px; top: -6px; width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle, #fff 30%, var(--mc) 70%, transparent 72%);
  box-shadow: 0 0 22px 8px var(--mc);
}
.gci-met.m2 { width: 180px; height: 2px; animation-delay: .18s; opacity: .8; margin: 34px 0 0 30px; }
@keyframes gci-fly {
  from { transform: translate(var(--x0), var(--y0)) rotate(var(--rot)); }
  to   { transform: translate(var(--x1), var(--y1)) rotate(var(--rot)); width: 40px; }
}
.b-mythic .gci-met {
  background: linear-gradient(90deg, #fff 0%, #FF5C8A 12%, #FFC23D 28%, #5CFF9D 45%, #5CC8FF 62%, #B45CFF 80%, transparent 100%);
}
/* จังหวะดาวตกถึงพื้น — วงแสงขยาย + จอวาบเป็นสีระดับ */
.gci-land {
  position: absolute; left: 50%; top: 42%; width: 20px; height: 20px; margin: -10px 0 0 -10px;
  border-radius: 50%; opacity: 0;
  box-shadow: 0 0 0 3px var(--mc), 0 0 40px 10px var(--mc);
}
.gci-flash {
  position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(circle at 50% 42%, #fff 0%, var(--mc) 25%, transparent 70%);
}
.gc-intro.landed .gci-land { animation: gci-ring .55s ease-out forwards; }
.gc-intro.landed .gci-flash { animation: gci-flash .55s ease-out forwards; }
.b-mythic.gc-intro.landed .gci-flash {
  background: conic-gradient(from 0deg at 50% 42%, #FF5C8A, #FFC23D, #5CFF9D, #5CC8FF, #B45CFF, #FF5C8A);
}
@keyframes gci-ring { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(18); } }
@keyframes gci-flash { 0% { opacity: 0; } 25% { opacity: .9; } 100% { opacity: 0; } }
.gci-skip {
  position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom) + 26px);
  text-align: center; font-size: 12px; color: rgba(255,255,255,.55);
}

/* ============================================================
   2) หลังการ์ดเรืองสีตามระดับ — "สีมาก่อนข้อมูล"
   ใบ Common ไม่มีอะไร · ยิ่งหายากยิ่งเต้นแรง
   ============================================================ */
.gc-back.hint-rare      { --mc: #4F9BFF; animation: gcb-hint 1.6s ease-in-out infinite; }
.gc-back.hint-legendary { --mc: #FFC23D; animation: gcb-hint 1.1s ease-in-out infinite; }
.gc-back.hint-secret    { --mc: #B45CFF; animation: gcb-hint .9s ease-in-out infinite; }
.gc-back.hint-mythic    { --mc: #FF5CDB; animation: gcb-hint .8s ease-in-out infinite, gcb-hue 2.4s linear infinite; }
@keyframes gcb-hint {
  0%, 100% { box-shadow: inset 0 0 0 2px var(--mc), 0 0 14px 0 var(--mc), 0 12px 26px -10px rgba(0,0,0,.6); }
  50%      { box-shadow: inset 0 0 0 3px #fff, 0 0 30px 6px var(--mc), 0 12px 26px -10px rgba(0,0,0,.6); }
}
@keyframes gcb-hue { to { filter: hue-rotate(360deg); } }

/* ============================================================
   3) หน้าการ์ด (132×190 · ต้องอ่านออกที่ขนาดนี้)
   ============================================================ */
.gcf {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: stretch;
  padding: 8px 8px 9px;
  border-radius: 17px; overflow: hidden;
  color: #fff; text-align: center;
  background: var(--gcf-bg);
  --mx: 30%; --my: 20%;
}
/* หน้าการ์ดเก่าตั้ง .gc-face b / span ไว้ (ตัวใหญ่ · จาง) — ทับลูกทุกตัวของการ์ดแบบใหม่
   สองบรรทัดนี้น้ำหนักเท่ากันแต่มาทีหลัง จึงคืนค่าให้ แล้วกฎ .gcf .xxx ข้างล่างค่อยตั้งของตัวเอง */
.gcf span, .gcf b { font-size: inherit; opacity: 1; line-height: inherit; }
.gcf b { font-weight: inherit; }
.gcf .gcf-frame {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border-radius: 17px; border: 3px solid transparent;
  background: var(--gcf-fr) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.gcf.gcf-common { --gcf-bg: linear-gradient(160deg, #3D4759, #1F2633); --gcf-fr: linear-gradient(160deg, #E2E8F0, #64748B); --st: #CBD5E1; }
.gcf.gcf-rare { --gcf-bg: linear-gradient(160deg, #1E40AF, #0B1A45); --gcf-fr: linear-gradient(135deg, #BFDBFE, #2563EB 40%, #93C5FD 60%, #1D4ED8); --st: #93C5FD; }
.gcf.gcf-legendary { --gcf-bg: linear-gradient(160deg, #6B4507, #2A1A02); --gcf-fr: linear-gradient(135deg, #FFF6CF, #F5B524 30%, #9A6512 50%, #FFE08A 70%, #C98A17); --st: #FFD45C; }
.gcf.gcf-secret { --gcf-bg: linear-gradient(160deg, #2A0E45, #0A0418); --gcf-fr: conic-gradient(#FF2E88, #27E0F5, #B45CFF, #FF2E88); --st: #E9B8FF; }
.gcf.gcf-mythic { --gcf-bg: radial-gradient(120% 90% at 50% 25%, #3A2378, #0B0620 70%); --gcf-fr: conic-gradient(#FF5C8A, #FFC23D, #5CFF9D, #5CC8FF, #B45CFF, #FF5C8A); --st: #fff; }
.gcf.gcf-mythic .gcf-frame { animation: gcf-hue 3s linear infinite; }
@keyframes gcf-hue { to { filter: hue-rotate(360deg); } }
/* Rare ขึ้นไปมีลายมุม — กรอบหรูขึ้นตามระดับ */
.gcf.gcf-rare::before, .gcf.gcf-legendary::before, .gcf.gcf-secret::before, .gcf.gcf-mythic::before {
  content: ''; position: absolute; inset: 7px; z-index: 3; pointer-events: none; border-radius: 12px;
  background:
    linear-gradient(var(--st), var(--st)) top left / 10px 1.5px no-repeat,
    linear-gradient(var(--st), var(--st)) top left / 1.5px 10px no-repeat,
    linear-gradient(var(--st), var(--st)) top right / 10px 1.5px no-repeat,
    linear-gradient(var(--st), var(--st)) top right / 1.5px 10px no-repeat,
    linear-gradient(var(--st), var(--st)) bottom left / 10px 1.5px no-repeat,
    linear-gradient(var(--st), var(--st)) bottom left / 1.5px 10px no-repeat,
    linear-gradient(var(--st), var(--st)) bottom right / 10px 1.5px no-repeat,
    linear-gradient(var(--st), var(--st)) bottom right / 1.5px 10px no-repeat;
  opacity: .8;
}
.gcf .gcf-top {
  position: relative; z-index: 4;
  display: flex; align-items: center; justify-content: space-between; gap: 4px;
  padding: 1px 3px 0;
  font-size: 8px; font-weight: 800; letter-spacing: .06em;
}
.gcf .gcf-top i { font-style: normal; color: var(--st); font-size: 8.5px; letter-spacing: -1px; text-shadow: 0 0 6px var(--st); }
.gcf.gcf-mythic .gcf-top b, .gcf.gcf-mythic .gcf-nm {
  background: linear-gradient(90deg, #FF9AC1, #FFE08A, #9DFFC6, #9ADCFF, #D9A8FF);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.gcf .gcf-art {
  position: relative; z-index: 1;
  height: 94px; margin-top: 5px;
  border-radius: 10px; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: rgba(255,255,255,.07);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.2), inset 0 -20px 30px -20px rgba(0,0,0,.5);
}
.gcf .a-tok .tok { position: relative; z-index: 1; filter: drop-shadow(0 4px 10px rgba(0,0,0,.4)); }
.gcf .a-tok b { position: relative; z-index: 1; font-size: 16px; }
.gcf .gcf-rays {
  position: absolute; inset: -40%;
  background: repeating-conic-gradient(from 0deg, rgba(255,214,120,.22) 0 10deg, transparent 10deg 24deg);
  animation: gcf-spin 14s linear infinite;
}
@keyframes gcf-spin { to { transform: rotate(360deg); } }
.gcf .gcf-sw { position: absolute; inset: 0; background-size: cover; }
.gcf .gcf-ph {
  position: relative; z-index: 1;
  width: 38px; height: 66px; border-radius: 9px;
  border: 2px solid rgba(255,255,255,.9);
  box-shadow: 0 6px 16px rgba(0,0,0,.35), inset 0 0 12px rgba(255,255,255,.25);
}
.gcf .gcf-ph::after { content: ''; position: absolute; top: 4px; left: 50%; width: 12px; height: 3px; margin-left: -6px; border-radius: 2px; background: rgba(255,255,255,.9); }
.gcf .a-3d { background: radial-gradient(90% 70% at 50% 30%, #2B2066, #0B0620); }
.gcf .gcf-grid {
  position: absolute; left: -30%; right: -30%; bottom: -30%; height: 75%;
  background:
    repeating-linear-gradient(90deg, rgba(160,140,255,.55) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(0deg, rgba(160,140,255,.55) 0 1px, transparent 1px 14px);
  transform: perspective(90px) rotateX(58deg);
  transform-origin: 50% 100%;
  animation: gcf-grid 1.6s linear infinite;
  -webkit-mask: linear-gradient(transparent, #000 60%); mask: linear-gradient(transparent, #000 60%);
}
@keyframes gcf-grid { to { background-position: 0 14px, 0 14px; } }
.gcf .gcf-ico {
  position: relative; z-index: 1;
  width: 54px; height: 54px; border-radius: 14px;
  display: grid; place-items: center;
  background: linear-gradient(160deg, #FFF4EC, #FFE2CF);
  box-shadow: 0 10px 22px rgba(0,0,0,.45), 0 0 0 2px rgba(255,255,255,.7);
  animation: gcf-float 2.4s ease-in-out infinite;
}
.gcf .gcf-ico svg { width: 36px; height: 36px; }
@keyframes gcf-float { 50% { transform: translateY(-5px) rotate(-4deg); } }
.gcf .gcf-3d {
  position: absolute; top: 5px; right: 6px; z-index: 2;
  font: 900 12px/1 'Orbitron', 'Space Mono', monospace; letter-spacing: .04em;
  background: linear-gradient(90deg, #FF9AC1, #FFE08A, #9DFFC6, #9ADCFF);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 4px rgba(255,255,255,.5));
}
.gcf .gcf-nm {
  position: relative; z-index: 4;
  margin-top: 7px; font-size: 14px; font-weight: 800; line-height: 1.15;
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gcf .gcf-ty { position: relative; z-index: 4; margin-top: 3px; font-size: 9.5px; opacity: .88; line-height: 1.25; }
.gcf .gcf-new {
  position: absolute; top: 24px; right: -24px; z-index: 5;
  transform: rotate(38deg);
  padding: 2px 26px; font-size: 8px; font-weight: 900; letter-spacing: .1em;
  background: linear-gradient(90deg, #FF3B5C, #FF7A1A); color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
}
/* ฟอยล์โฮโลแกรม (Legendary ขึ้นไป) — รุ้งเลื่อนเองช้า ๆ · ลากนิ้วบนการ์ดแล้วตามนิ้ว */
.gcf .gcf-holo {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  mix-blend-mode: color-dodge; opacity: .38;
  background: repeating-linear-gradient(115deg,
    #ff7773 0%, #ffed5f 7%, #a8ff5f 14%, #83fff7 21%, #7894ff 28%, #d875ff 35%, #ff7773 42%);
  background-size: 260% 260%;
  background-position: var(--mx) var(--my);
  animation: gcf-holo 7s linear infinite;
}
.gcf.touch .gcf-holo { animation: none; opacity: .55; }
.gcf.gcf-legendary .gcf-holo { opacity: .26; }
@keyframes gcf-holo { from { background-position: 0% 30%; } to { background-position: 100% 70%; } }
.gcf .gcf-glare {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.55), transparent 48%);
  mix-blend-mode: overlay;
}

/* ============================================================
   4) จอโชว์ของหายาก
   ============================================================ */
.gc-rv {
  position: absolute; inset: 0; z-index: 99; overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
  animation: gci-in .25s ease-out;
}
.gc-rv.out { opacity: 0; transition: opacity .25s ease; }
.gcr-bg {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--mc) 45%, transparent) 0%, rgba(4,5,14,.92) 55%);
  background: radial-gradient(circle at 50% 46%, rgba(255,255,255,.12) 0%, rgba(4,5,14,.92) 55%);
}
@supports (background: color-mix(in srgb, red 50%, blue)) {
  .gcr-bg { background: radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--mc) 45%, transparent) 0%, rgba(4,5,14,.93) 58%); }
}
.gcr-rays {
  position: absolute; left: 50%; top: 46%; width: 900px; height: 900px; margin: -450px 0 0 -450px;
  background: repeating-conic-gradient(from 0deg, var(--mc) 0 6deg, transparent 6deg 20deg);
  opacity: .32;
  -webkit-mask: radial-gradient(circle, #000 0%, transparent 55%); mask: radial-gradient(circle, #000 0%, transparent 55%);
  animation: gcf-spin 16s linear infinite;
}
.gcr-rays.r2 { opacity: .18; animation-duration: 26s; animation-direction: reverse; }
.b-mythic .gcr-rays {
  background: repeating-conic-gradient(from 0deg, #FF5C8A 0 6deg, transparent 6deg 12deg, #FFC23D 12deg 18deg, transparent 18deg 24deg,
    #5CFF9D 24deg 30deg, transparent 30deg 36deg, #5CC8FF 36deg 42deg, transparent 42deg 48deg, #B45CFF 48deg 54deg, transparent 54deg 60deg);
  opacity: .4;
}
.gcr-ring {
  position: absolute; left: 50%; top: 46%; width: 40px; height: 40px; margin: -20px 0 0 -20px;
  border-radius: 50%; box-shadow: 0 0 0 4px var(--mc), 0 0 50px 14px var(--mc);
  animation: gci-ring .9s ease-out forwards;
}
.gcr-hd {
  position: relative; z-index: 2; margin-top: calc(env(safe-area-inset-top) + 56px);
  font: 900 22px/1.1 'Orbitron', 'IBM Plex Sans Thai', sans-serif; letter-spacing: .12em;
  color: var(--mc); text-shadow: 0 0 18px var(--mc);
  animation: gcr-hd .7s cubic-bezier(.2,1.4,.4,1) both;
}
.b-mythic .gcr-hd {
  background: linear-gradient(90deg, #FF9AC1, #FFE08A, #9DFFC6, #9ADCFF, #D9A8FF, #FF9AC1);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none;
  filter: drop-shadow(0 0 10px rgba(255,255,255,.45));
  animation: gcr-hd .7s cubic-bezier(.2,1.4,.4,1) both, gcr-slide 3s linear infinite;
}
@keyframes gcr-hd { from { opacity: 0; transform: scale(.6); letter-spacing: .5em; } to { opacity: 1; transform: none; } }
@keyframes gcr-slide { to { background-position: 200% 0; } }
.gcr-card {
  position: absolute; left: 50%; top: 46%; z-index: 2;
  width: 132px; height: 190px; margin: -95px 0 0 -66px;
  transform: scale(1.6);
  animation: gcr-pop .7s cubic-bezier(.2,1.5,.4,1) both, gcr-bob 3.2s ease-in-out .7s infinite;
}
.gcr-face {
  position: absolute; inset: 0; border-radius: 17px; overflow: hidden;
  box-shadow: 0 0 40px 4px var(--mc), 0 20px 40px rgba(0,0,0,.6);
}
@keyframes gcr-pop { from { opacity: 0; transform: scale(.3) rotateY(180deg); } to { opacity: 1; transform: scale(1.6) rotateY(0); } }
@keyframes gcr-bob { 50% { transform: scale(1.6) translateY(-4px) rotateZ(-1.2deg); } }
.gcr-note {
  position: absolute; left: 24px; right: 24px; bottom: calc(env(safe-area-inset-bottom) + 112px); z-index: 2;
  text-align: center; font-size: 13.5px; line-height: 1.45; color: rgba(255,255,255,.88);
}
.gcr-go {
  position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 44px); z-index: 2;
  transform: translateX(-50%);
  min-width: 160px; min-height: 46px; padding: 0 26px;
  border: 1px solid rgba(255,255,255,.35); border-radius: 999px;
  background: rgba(255,255,255,.12); color: #fff;
  font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.gcr-spk {
  position: absolute; left: 50%; top: 46%; z-index: 1;
  width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 8px 2px var(--mc);
  animation: gcr-spk 1.6s ease-out infinite;
}
@keyframes gcr-spk {
  0%   { opacity: 0; transform: translate(0, 0) scale(.4); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .gc-back[class*="hint-"], .gcf-holo, .gcf-rays, .gcf-grid, .gcf-ico, .gcf-mythic .gcf-frame { animation: none; }
}