/* ============================================================
   gacha-halloween.css — layar Gacha Halloween.
   Butuh: tokens.css, overlay.css, components.css, gacha.css
   (kotak status, panduan, riwayat dipakai ulang lewat .fh-gc__*)
   dan gacha-tiket.css (.fh-gt__chev).

   Tiga bagian khas: jalur jaminan 0..90, panggung kartu (x1/x10),
   etalase skin. Warna tier lewat --c yang dipasang JS; mythical =
   oranye labu (--t-artefak).
   ============================================================ */

.fh-gh .fh-ov__body{padding:var(--sp-md);gap:var(--sp-md)}
.fh-gh .fh-ov__body > *{flex:none}

/* Kotak beli: tombol, bukan kotak mati. */
.fh-gh__buy{text-align:left;cursor:pointer;border-color:var(--t-artefak)}
.fh-gh__buy b{font-family:var(--font-pixel);font-size:11px;font-weight:400;color:var(--t-artefak)}
.fh-gh__buy em{font-style:normal;font-size:10px;color:var(--pixel-muted)}

/* ---------- JALUR JAMINAN ---------- */

.fh-gh__track{
  padding:46px 14px 10px;
  border:1px solid var(--pixel-border);border-radius:var(--r-lg);
  background:var(--pixel-surface);
}
.fh-gh__tline{
  position:relative;height:8px;border-radius:4px;
  background:var(--pixel-raised);
}
.fh-gh__tline > i{
  position:absolute;left:0;top:0;bottom:0;border-radius:4px;
  background:linear-gradient(90deg,#7A3CFF,var(--t-artefak));
  transition:width .5s ease-out;
}
.fh-gh__mk{
  position:absolute;top:-40px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:2px;
}
.fh-gh__mk:last-child{transform:translateX(-85%)}
.fh-gh__mkimg{
  display:flex;height:30px;padding:1px 2px;
  border:1px solid var(--c);border-radius:6px;
  background:var(--pixel-bg);
  box-shadow:0 0 8px color-mix(in srgb, var(--c) 45%, transparent);
}
.fh-gh__mkimg img{width:26px;height:26px;object-fit:contain}
.fh-gh__mkimg img + img{margin-left:-6px}
.fh-gh__mkimg span{width:26px;display:grid;place-items:center;font-size:15px;color:var(--c)}
.fh-gh__mk b{
  font-family:var(--font-pixel);font-size:7px;font-weight:400;color:var(--c);
}
.fh-gh__mk::after{
  content:'';width:2px;height:10px;background:var(--c);margin-top:1px;
}
.fh-gh__mk.is-done{opacity:.45}
.fh-gh__tnote{
  display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;
  margin:12px 0 0;font-size:11px;line-height:1.4;color:var(--pixel-text);
}
.fh-gh__tnote b{color:var(--t-artefak)}
.fh-gh__tnote em{font-style:normal;color:var(--pixel-muted)}

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

.fh-gh__stage{
  position:relative;overflow:hidden;
  min-height:260px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:16px 10px 58px;
  border:1px solid var(--pixel-border);border-radius:var(--r-lg);
  background:
    radial-gradient(90% 70% at 50% 110%, rgba(255,138,43,.22), transparent 70%),
    linear-gradient(180deg,#1A0F2E,#0D0A18);
  --c:var(--t-artefak);
}
.fh-gh__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-gh__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;
}
/* Bulan purnama + kelelawar diam di latar. */
.fh-gh__moon{
  position:absolute;right:22px;top:18px;width:44px;height:44px;border-radius:50%;
  background:radial-gradient(circle at 40% 40%,#FFF2C9,#F4D27A 70%);
  box-shadow:0 0 30px rgba(244,210,122,.45);
  opacity:.85;
}
.fh-gh__moon::after{
  content:'🦇';position:absolute;left:-46px;top:20px;font-size:16px;
  animation:fh-gh-kelelawar 6s ease-in-out infinite;
}
@keyframes fh-gh-kelelawar{0%,100%{transform:translate(0,0)}50%{transform:translate(-30px,-8px)}}
/* Diam: satu kartu tertutup melayang pelan. */
.fh-gh__cards.is-float .fh-gh__card{animation:fh-gh-layang 2.6s ease-in-out infinite}
@keyframes fh-gh-layang{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
/* Menunggu server: kartu tertutup bergetar, berselang-seling. */
.fh-gh__cards.is-shake .fh-gh__card{animation:fh-gh-getar .22s ease-in-out infinite}
.fh-gh__cards.is-shake .fh-gh__card:nth-child(even){animation-delay:.11s}
@keyframes fh-gh-getar{0%,100%{transform:rotate(0)}25%{transform:rotate(-3deg) translateX(-1px)}75%{transform:rotate(3deg) translateX(1px)}}
.fh-gh__stage.is-skin{box-shadow:0 0 0 2px var(--c), 0 0 30px color-mix(in srgb, var(--c) 50%, transparent)}

/* Kartu: punggung (labu) lalu berbalik ke muka hadiah. */
.fh-gh__cards{
  position:relative;z-index:5;
  display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px;
  width:100%;
}
.fh-gh__card{width:132px;height:168px;perspective:600px}
.fh-gh__cards.is-multi .fh-gh__card{width:calc((100% - 32px) / 5);min-width:52px;height:96px}
.fh-gh__cin{
  position:relative;width:100%;height:100%;
  transform-style:preserve-3d;transition:transform .45s cubic-bezier(.3,1.4,.5,1);
}
/* JANGAN pasang animasi apa pun di .fh-gh__cin. Animasi transform dengan
   fill-mode menimpa rotateY(180deg) milik .is-open, dan animasi opacity
   membuat Chrome meratakan lapisan 3D (backface-visibility mati) — dua-duanya
   berakhir sama: kartu berputar tapi yang terlihat punggung tercermin.
   Efek masuk dipasang di punggung saja, yang tidak ikut 3D. */
.fh-gh__cback{animation:fh-gh-masuk .3s ease-out both;animation-delay:calc(var(--i) * 40ms)}
@keyframes fh-gh-masuk{from{filter:brightness(2)}to{filter:none}}
.fh-gh__card.is-open .fh-gh__cin{transform:rotateY(180deg)}
.fh-gh__cback,.fh-gh__cface{
  position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:var(--r-md);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
}
.fh-gh__cback{
  border:1px solid #5A2E8C;border-bottom:4px solid #5A2E8C;
  background:repeating-linear-gradient(45deg,#2A1645 0 6px,#231039 6px 12px);
}
/* Punggung kartu: tanda tanya saja — tidak ada petunjuk hadiah. */
.fh-gh__cback b{
  font-family:var(--font-pixel);font-weight:400;font-size:28px;line-height:1;
  color:var(--t-artefak);text-shadow:0 0 10px rgba(255,138,43,.6);
}
.fh-gh__cards.is-multi .fh-gh__cback b{font-size:14px}
.fh-gh__cface{
  transform:rotateY(180deg);padding:6px 4px;
  border:1px solid var(--c);border-bottom:4px solid var(--c);
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--c) 28%, transparent), transparent 60%),
    var(--pixel-surface);
}
.fh-gh__card.is-skin.is-open .fh-gh__cface{
  box-shadow:0 0 22px var(--c), 0 0 0 3px color-mix(in srgb, var(--c) 30%, transparent);
  animation:fh-gh-denyut 1.4s ease-in-out .5s infinite;
}
@keyframes fh-gh-denyut{0%,100%{box-shadow:0 0 14px var(--c)}50%{box-shadow:0 0 30px var(--c)}}
.fh-gh__ctier{font-family:var(--font-pixel);font-size:6px;letter-spacing:.4px;color:var(--c)}
.fh-gh__cicon{height:84px;width:84px;display:grid;place-items:center}
.fh-gh__cicon img{width:84px;height:84px;object-fit:contain}
/* Pixel-art 16x16 (koin, batu) diperbesar tanpa kabur. */
.fh-gh__cicon img[src$=".svg"],
.fh-gh__ricon img[src$=".svg"],
.fh-gh__hicon img[src$=".svg"],
.fh-gh__mkimg img[src$=".svg"]{image-rendering:pixelated}
.fh-gh__cicon.is-kosong,.fh-gh__ricon.is-kosong,.fh-gh__hicon.is-kosong{
  border:1px dashed var(--pixel-border);border-radius:6px;
}
/* Ikon kecil di tabel panduan & riwayat. */
.fh-gh__ricon,.fh-gh__hicon{flex:none;width:22px;height:22px;display:grid;place-items:center}
.fh-gh__ricon img,.fh-gh__hicon img{width:22px;height:22px;object-fit:contain}
.fh-gh__rw{align-items:center}
/* Riwayat: 4 kolom. Nama boleh terpotong, waktu tidak pernah patah baris. */
.fh-gh__hrow{grid-template-columns:30px 24px minmax(0,1fr) auto}
.fh-gh__hrow .fh-gc__hname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fh-gh__hrow .fh-gc__hmeta{white-space:nowrap}
.fh-gh__hrow .fh-gc__hmeta small{display:block;font-size:8px;opacity:.75}
.fh-gh__gicon{display:flex;gap:2px;width:auto;min-width:32px}
.fh-gh__gicon img{width:30px;height:30px;object-fit:contain}
/* Satu kolom: nama hadiah lengkap dengan jumlahnya (x100 / x150). */
#fh-gh-guide .fh-gc__rewards{grid-template-columns:1fr}
#fh-gh-guide .fh-gc__rw span{flex:1;min-width:0}
/* Lencana jumlah di kartu hasil (umpan & batu). */
.fh-gh__cface{position:relative}
.fh-gh__cqty{
  position:absolute;right:4px;top:18px;
  font-family:var(--font-pixel);font-size:8px;line-height:1;
  padding:2px 3px;border-radius:3px;
  background:var(--pixel-bg);color:var(--c);border:1px solid var(--c);
}
.fh-gh__cards.is-multi .fh-gh__cqty{font-size:6px;top:14px;right:2px}
.fh-gh__cname{font-size:11px;font-weight:600;line-height:1.2;text-align:center;color:var(--pixel-text)}
.fh-gh__cards.is-multi .fh-gh__cicon{height:40px;width:40px}
.fh-gh__cards.is-multi .fh-gh__cicon img{width:40px;height:40px}
.fh-gh__cards.is-multi .fh-gh__cname{font-size:8px;max-height:2.4em;overflow:hidden}
.fh-gh__cards.is-multi .fh-gh__ctier{font-size:5px}

.fh-gh__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-gh__cap small{font-family:var(--font-pixel);font-size:7px;letter-spacing:.4px;color:var(--c)}
.fh-gh__cap b{
  font-size:13px;color:var(--pixel-text);max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ---------- ETALASE SKIN ---------- */

.fh-gh__h{
  margin:0;font-family:var(--font-pixel);font-size:8px;font-weight:400;
  letter-spacing:.4px;color:var(--pixel-muted);
}
.fh-gh__skins{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;
}
.fh-gh__skin{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:8px 6px;text-align:center;
  border:1px solid var(--pixel-border);border-top:3px solid var(--c);
  border-radius:var(--r-md);background:var(--pixel-surface);
}
.fh-gh__skin img{width:72px;height:72px;object-fit:contain;filter:grayscale(.7) brightness(.7)}
.fh-gh__skin.is-own img{filter:none}
.fh-gh__stier{font-family:var(--font-pixel);font-size:6px;color:var(--c)}
.fh-gh__skin b{font-size:11px;line-height:1.2;color:var(--pixel-text)}
.fh-gh__skin em{font-style:normal;font-size:9px;color:var(--pixel-muted)}
.fh-gh__skin.is-own em{color:var(--t-rare)}

/* ---------- TOMBOL ---------- */

.fh-gh__btns{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-sm)}
.fh-gh__btns .fh-btn:last-child{
  background:var(--t-artefak);border-color:var(--t-artefak);
}

@media (prefers-reduced-motion: reduce){
  .fh-gh__cin{transition:none;animation:none}
  .fh-gh__moon::after,
  .fh-gh__cards.is-float .fh-gh__card,
  .fh-gh__cards.is-shake .fh-gh__card,
  .fh-gh__card.is-skin.is-open .fh-gh__cface{animation:none}
}