/* ============================================================
   gacha-tiket.css — layar Gacha Tiket: panggung MANCING.
   Butuh: tokens.css, overlay.css, components.css, gacha.css
   (kotak status, ticker, sheet feed/riwayat dipakai ulang lewat
   kelas .fh-gc__*).

   Panggungnya bukan roda/case: joran melempar, pelampung menunggu
   di air, STRIKE, ditarik, hadiahnya muncul dari air. Hasil sudah
   ditentukan server sebelum animasi mulai - yang diacak di sini
   cuma DRAMANYA (lama menunggu, jumlah sentuhan), bukan hadiahnya.

   Warna tier lewat --c yang dipasang gacha-tiket.js per keadaan.
   ============================================================ */

.fh-gt .fh-ov__body{padding:var(--sp-md);gap:var(--sp-md)}
.fh-gt .fh-ov__body > *{flex:none}   /* lihat catatan flex:none di gacha.css */

/* Kotak gift: sisa slot bulan ini. Angka besar = sisa, kecil = plafon. */
.fh-gt__gift{display:flex;align-items:baseline;gap:4px}
.fh-gt__gift b{font-family:var(--font-pixel);font-size:16px;font-weight:400;color:var(--pixel-primary)}
.fh-gt__gift i{font-style:normal;font-size:10px;color:var(--pixel-muted)}
.fh-gt__gift.is-habis b{color:var(--pixel-muted)}
.fh-gc__box em.fh-gt__mine{color:var(--t-rare)}

/* ---------- PANGGUNG ---------- */

.fh-gt__stage{
  position:relative;overflow:hidden;
  height:280px;
  border:1px solid var(--pixel-border);border-radius:var(--r-lg);
  background:#0B1C2A;
  --c:var(--pixel-muted);
}
/* Garis pindai + siku sudut, sama dengan panggung lain. */
.fh-gt__stage::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:8;
  background:repeating-linear-gradient(180deg,transparent 0 15px,var(--scanline) 15px 30px);
}
.fh-gt__stage::after{
  content:'';position:absolute;inset:6px;pointer-events:none;z-index:9;
  --g:linear-gradient(var(--c),var(--c));
  background:
    var(--g) 0 0        /14px 2px no-repeat, var(--g) 0 0        /2px 14px no-repeat,
    var(--g) 100% 0     /14px 2px no-repeat, var(--g) 100% 0     /2px 14px no-repeat,
    var(--g) 0 100%     /14px 2px no-repeat, var(--g) 0 100%     /2px 14px no-repeat,
    var(--g) 100% 100%  /14px 2px no-repeat, var(--g) 100% 100%  /2px 14px no-repeat;
  opacity:.8;
}
/* Guncangan layar: saat STRIKE (dua kali) dan saat hentakan. */
.fh-gt__stage.is-strike{animation:fh-gt-guncang .32s ease-in-out 2}
.fh-gt__stage.is-pull{animation:fh-gt-guncang .28s ease-in-out 1}
@keyframes fh-gt-guncang{0%,100%{transform:translate(0,0)}25%{transform:translate(-4px,2px)}75%{transform:translate(4px,-2px)}}

/* SVG pemandangan: langit, laut, joran, tali, pelampung, riak,
   cipratan. viewBox 360x270, preserveAspectRatio none supaya
   pemetaan koordinat SVG -> px di JS cuma perkalian. */
.fh-gt__svg{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1}
.fh-gt__waves path{animation:fh-gt-ombak 7s linear infinite}
.fh-gt__waves path:nth-child(2){animation-duration:11s;animation-direction:reverse;opacity:.55}
@keyframes fh-gt-ombak{from{transform:translateX(0)}to{transform:translateX(-60px)}}
/* Pendar tier di dalam air; muncul saat strike, menyala saat hentak. */
#fh-gt-glow{opacity:0;transition:opacity .3s;fill:var(--c)}
.fh-gt__stage.is-strike #fh-gt-glow{opacity:.45}
.fh-gt__stage.is-pull #fh-gt-glow,
.fh-gt__stage.is-hit #fh-gt-glow{opacity:.7}
/* Pelampung: goyang saat menunggu, celup saat sentuhan. */
#fh-gt-bob{transform-box:fill-box;transform-origin:center}
.fh-gt__stage.is-wait #fh-gt-bob{animation:fh-gt-apung 2.2s ease-in-out infinite}
@keyframes fh-gt-apung{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(3px) rotate(5deg)}}
#fh-gt-bob.is-nibble{animation:fh-gt-celup .45s ease-out!important}
@keyframes fh-gt-celup{0%{transform:translateY(0)}35%{transform:translateY(9px) rotate(9deg)}100%{transform:translateY(0)}}
/* Riak & cipratan digambar JS sebagai elemen SVG berumur pendek. */
.fh-gt__riak{fill:none;stroke:rgba(255,255,255,.6);stroke-width:2;animation:fh-gt-riak .8s ease-out forwards;transform-box:fill-box;transform-origin:center}
.fh-gt__riak.is-big{stroke:var(--c);stroke-width:3;animation-duration:1s}
@keyframes fh-gt-riak{0%{transform:scale(.4);opacity:1}100%{transform:scale(3.4);opacity:0}}
.fh-gt__tetes{fill:#CFE6F5;animation:fh-gt-tetes .9s ease-out forwards}
.fh-gt__tetes.is-c{fill:var(--c)}
@keyframes fh-gt-tetes{
  0%{transform:translate(0,0);opacity:1}
  100%{transform:translate(var(--dx),var(--dy));opacity:0}
}

/* BENDA YANG TERANGKAT: siluet gelap (ikan / sepatu / gurita, acak)
   yang melayang dari air ke depan pemain. Posisi & skala per
   frame dari JS (transform), jadi di sini cuma rupa. */
.fh-gt__obj{
  position:absolute;left:0;top:0;z-index:5;
  width:64px;height:64px;margin:-32px 0 0 -32px;
  display:grid;place-items:center;
  opacity:0;pointer-events:none;will-change:transform;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.6));
}
.fh-gt__oicon{font-size:52px;line-height:1;display:grid;place-items:center;filter:brightness(0)}
.fh-gt__oicon img{width:64px;height:64px;object-fit:contain}
.fh-gt__obj.is-on{opacity:1}

/* KILATAN saat benda di puncak. Bukan kotak putih yang berkedip:
   cahaya radial dari titik puncak (--fx/--fy) yang mengembang
   menutupi seluruh panggung lalu memudar, dicampur `screen` supaya
   membaur dengan pemandangan di bawahnya. Ukurannya 3x panggung
   supaya lingkarannya tidak pernah terlihat sebagai bentuk. */
.fh-gt__flash{
  position:absolute;left:var(--fx,50%);top:var(--fy,34%);z-index:7;
  width:300%;height:300%;   /* margin % mengacu LEBAR untuk semua sisi -
                               pemusatan pakai translate di transform */
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,#fff 0%,rgba(255,255,255,.9) 6%,rgba(255,255,255,.35) 18%,transparent 40%);
  mix-blend-mode:screen;
  opacity:0;transform:translate(-50%,-50%) scale(.15);will-change:transform,opacity;
}
.fh-gt__flash.is-on{animation:fh-gt-kilat .7s cubic-bezier(.1,.8,.3,1) forwards}
@keyframes fh-gt-kilat{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.15)}
  15%{opacity:1;transform:translate(-50%,-50%) scale(.6)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.6)}
}

/* KARTU HADIAH: lahir dari kilatan, di tengah panggung. Bahasa
   visualnya kartu case-opening (gacha.css .fh-gc__card): gambar,
   nama, bilah warna rarity di dasar - diperbesar dan diberi pendar. */
.fh-gt__card{
  position:absolute;left:50%;top:46%;z-index:6;
  width:150px;height:186px;margin:-93px 0 0 -75px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  padding:10px 8px 14px;
  border:1px solid var(--c);border-bottom:6px solid var(--c);
  border-radius:var(--r-md);
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--c) 28%, transparent), transparent 60%),
    var(--pixel-surface);
  box-shadow:0 0 22px var(--c), 0 10px 24px rgba(0,0,0,.5);
  overflow:hidden;               /* kilau ::after tidak boleh bocor keluar kartu */
  opacity:0;pointer-events:none;
}
.fh-gt__card.is-on{animation:fh-gt-kartu .55s cubic-bezier(.2,1.5,.4,1) forwards}
@keyframes fh-gt-kartu{0%{transform:scale(.35) rotate(-6deg);opacity:0}60%{transform:scale(1.08);opacity:1}100%{transform:none;opacity:1}}
.fh-gt__card.is-gift{
  border-color:var(--pixel-primary);
  box-shadow:0 0 28px var(--pixel-primary), 0 0 0 4px rgba(var(--primary-rgb),.25), 0 10px 24px rgba(0,0,0,.5);
}
.fh-gt__ctier{font-family:var(--font-pixel);font-size:7px;letter-spacing:.5px;color:var(--c)}
.fh-gt__cicon{font-size:56px;line-height:1;height:76px;display:grid;place-items:center;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5))}
.fh-gt__cicon img{width:76px;height:76px;object-fit:contain}
.fh-gt__cname{font-size:12px;font-weight:600;line-height:1.2;text-align:center;color:var(--pixel-text)}
/* Kilau menyapu kartu sekali, setelah muncul. */
.fh-gt__card::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);
  transform:translateX(-120%);
}
.fh-gt__card.is-on::after{animation:fh-gt-kilau 1s ease-out .5s forwards}
@keyframes fh-gt-kilau{0%{transform:translateX(-120%);opacity:1}100%{transform:translateX(120%);opacity:0}}
/* Cincin ledakan di belakang kartu. */
.fh-gt__burst{
  position:absolute;left:50%;top:46%;z-index:4;
  width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;
  border:3px solid var(--c);opacity:0;pointer-events:none;
}
.fh-gt__stage.is-hit .fh-gt__burst{animation:fh-gc-burst .8s ease-out forwards}
.fh-gt__stage.is-gift .fh-gt__burst{box-shadow:0 0 0 6px rgba(var(--primary-rgb),.35)}

/* KETERANGAN di dasar panggung. */
.fh-gt__cap{
  position:absolute;left:0;right:0;bottom:12px;z-index:8;
  display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:0 var(--sp-md);text-align:center;
}
.fh-gt__cap small{font-family:var(--font-pixel);font-size:7px;letter-spacing:.4px;color:var(--pixel-muted)}
.fh-gt__cap b{
  font-size:13px;color:var(--c);max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.fh-gt__stage.is-wait .fh-gt__cap small,
.fh-gt__stage.is-cast .fh-gt__cap small{color:var(--pixel-primary)}
.fh-gt__stage.is-strike .fh-gt__cap small,
.fh-gt__stage.is-pull .fh-gt__cap small{
  color:#FF5A3C;font-size:10px;animation:fh-gc-denyut .4s ease-in-out infinite;
}
.fh-gt__stage.is-gift .fh-gt__cap small{color:var(--pixel-primary);font-size:9px}
.fh-gt__stage.is-error .fh-gt__cap b{font-size:11px;white-space:normal;line-height:1.4}
.fh-gt__stage.is-error .fh-gt__cap{bottom:auto;top:50%;transform:translateY(-50%)}
.fh-gt__stage.is-error .fh-gt__svg{opacity:.35}

/* Tombol utama: sama dengan gacha, teksnya berganti keadaan. */
.fh-gt__demo{margin-top:6px}

/* PANDUAN: tabel hadiah 4 tier + baris gift. */
.fh-gt__rw{
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding:6px 8px;border-left:3px solid var(--c);
  border-radius:var(--r-sm);background:var(--pixel-surface);font-size:11px;
}
.fh-gt__rw b{font-family:var(--font-pixel);font-size:8px;color:var(--c)}
.fh-gt__rw.is-gift{border-color:var(--pixel-primary);background:linear-gradient(90deg,rgba(var(--primary-rgb),.16),var(--pixel-surface) 60%)}
.fh-gt__rws{display:flex;flex-direction:column;gap:4px}
.fh-gt__tier{
  display:flex;justify-content:space-between;font-family:var(--font-pixel);font-size:7px;
  color:var(--c);padding:6px 0 2px;letter-spacing:.3px;
}


/* Titik LIVE di ticker (id sendiri, gaya sama dengan gacha.css). */
#fh-gt-feed-dot{
  width:6px;height:6px;border-radius:50%;background:var(--t-rare);
  animation:fh-gc-denyut 2s ease-in-out infinite;
}
@media (prefers-reduced-motion:reduce){#fh-gt-feed-dot{animation:none}}

@media (prefers-reduced-motion:reduce){
  .fh-gt__waves path,#fh-gt-bob,.fh-gt__stage{animation:none!important}
  .fh-gt__card.is-on{animation:none;opacity:1}
  .fh-gt__card.is-on::after{animation:none}
}