/* ============================================================
   MIBBLIN — TAMPILAN GAME (Season 0)
   Warnanya ngikutin situs utama: malam nila + emas hangat.
   ============================================================ */

:root{
  --bg:      #0B0A14;
  --bg-2:    #12111F;
  --panel:   #191828;
  --slot:    #14131F;
  --line:    #2A2840;
  --ink:     #EFEBF7;
  --ink-dim: #A49DC0;
  --gold:    #F3C46B;
  --mint:    #8FE3C0;
  --violet:  #A78BFA;

  --radius: 14px;
  --font-pixel: "Press Start 2P", monospace;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
}

*{ box-sizing: border-box; }

body{
  margin:0;
  background:
    radial-gradient(ellipse 90% 55% at 50% -8%, #1B1930 0%, transparent 60%),
    var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  line-height:1.6;
  -webkit-font-smoothing: antialiased;
  min-height:100vh;
}

img{ display:block; max-width:100%; image-rendering: pixelated; }

/* ============ BAR ATAS ============ */
.hud{
  position: sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:16px;
  padding: 12px 18px;
  background: rgba(11,10,20,.85);
  backdrop-filter: blur(12px);
  border-bottom:1px solid var(--line);
}
.hud-back{
  font-family: var(--font-pixel); font-size:10px;
  color: var(--ink-dim); text-decoration:none;
  white-space:nowrap;
}
.hud-back:hover{ color: var(--gold); }

.hud-stats{ display:flex; gap:10px; margin-left:auto; }
.hud-stat{
  display:flex; align-items:baseline; gap:7px;
  background: var(--panel); border:1px solid var(--line);
  border-radius: 999px; padding: 7px 15px;
}
.hud-icon{ color: var(--gold); font-size:13px; }
.hud-stat b{
  font-family: var(--font-pixel); font-weight:400; font-size:13px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.hud-stat small{ font-size:11px; color: var(--ink-dim); }

.sound-btn{
  width:34px; height:34px; flex-shrink:0;
  border-radius:50%; cursor:pointer;
  border:1px solid var(--line); background: var(--panel);
  color: var(--gold); font-size:15px; line-height:1;
  transition: color .18s, border-color .18s;
}
.sound-btn:hover{ border-color: var(--gold); }
.sound-btn.off{ color:#4E4A6E; }

.season{
  font-family: var(--font-pixel); font-size:8px;
  color: var(--mint); border:1px solid rgba(143,227,192,.3);
  background: rgba(143,227,192,.07);
  padding: 6px 11px; border-radius:999px; white-space:nowrap;
}

/* ============ TATA LETAK ============ */
.game{
  max-width: 980px; margin-inline:auto;
  padding: 22px 18px 60px;
  display:grid; gap:18px;
}
.two-col{ display:grid; grid-template-columns: 1fr 1fr; gap:18px; }

.panel{
  background: var(--panel); border:1px solid var(--line);
  border-radius: var(--radius); padding: 22px;
}
.panel-head{ display:flex; align-items:center; gap:12px; }
.panel h2{
  font-family: var(--font-pixel); font-weight:400;
  font-size:14px; margin:0;
}
.panel-note{
  margin-left:auto; font-family: var(--font-pixel);
  font-size:8px; color: var(--ink-dim);
}
.panel-sub{ font-size:13px; color: var(--ink-dim); margin: 8px 0 18px; }

/* ============ PULAU ============ */
/* Pulaunya satu gambar utuh; roh-rohnya ditempel di atasnya pakai
   posisi persen, jadi ikut mengecil rapi di layar HP. */
.island{
  position:relative;
  border-radius: 12px;
  overflow:hidden;
  border:1px solid var(--line);
  background:#0A0912;
}
.island-bg{ width:100%; display:block; }
.spots{ position:absolute; inset:0; }

.spot{
  position:absolute;
  width:13%;
  transform: translate(-50%, -78%);
  display:flex; flex-direction:column; align-items:center;
}
.spot img{
  width:100%;
  animation: bob 3.4s ease-in-out infinite;
  animation-delay: var(--d, 0s);
  filter: drop-shadow(0 0 12px var(--r-glow, transparent));
}
@keyframes bob{ 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-6%) } }

/* bayangan oval di rumput, biar rohnya terasa berpijak */
.spot .shadow{
  position:absolute; bottom:-4%; left:50%;
  width:62%; height:14%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(0,0,0,.55) 0%, transparent 70%);
}
/* nama muncul waktu disentuh/diarahkan, biar pulaunya tidak penuh tulisan */
.spot .tag{
  position:absolute; bottom:-18%;
  font-family: var(--font-pixel); font-size:7px;
  color: var(--ink); background: rgba(11,10,20,.85);
  border:1px solid var(--r-color, var(--line));
  padding: 3px 6px; border-radius:5px; white-space:nowrap;
  opacity:0; transition: opacity .18s; pointer-events:none;
}
.spot:hover .tag{ opacity:1; }

/* titik kosong */
.spot.empty{ width:9%; }
.spot.empty .ring{
  display:block; width:100%; aspect-ratio:2/1;
  border:2px dashed rgba(164,157,192,.35);
  border-radius:50%;
  transition: border-color .2s;
}
.spot.empty:hover .ring{ border-color: var(--gold); }

/* ============ NEST ============ */
.nest{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.incu{
  background: var(--slot); border:1px dashed var(--line);
  border-radius:12px; padding: 16px 12px;
  text-align:center; min-height: 152px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
}
.incu.busy{ border-style:solid; border-color: rgba(243,196,107,.35); }
.incu.ready{ border-style:solid; border-color: var(--mint); }
.incu img{ width:58px; }
.incu.busy img{ animation: wiggle 1.6s ease-in-out infinite; }
.incu.ready img{ animation: shake .5s ease-in-out infinite; }
@keyframes wiggle{ 0%,100%{transform:rotate(-3deg)} 50%{transform:rotate(3deg)} }
@keyframes shake{ 0%,100%{transform:translateX(-2px) rotate(-5deg)} 50%{transform:translateX(2px) rotate(5deg)} }

.incu-time{
  font-family: var(--font-pixel); font-size:11px; color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.incu-hint{ font-size:11px; color: var(--ink-dim); }

.btn-mini{
  font-family: var(--font-pixel); font-size:10px;
  padding: 9px 16px; border-radius:9px; border:0; cursor:pointer;
  background: var(--panel); color: var(--ink-dim);
  border:1px solid var(--line);
  transition: transform .12s;
}
.btn-mini:hover:not(:disabled){ transform: translateY(-1px); color: var(--ink); }
.btn-mini:disabled{ opacity:.4; cursor:default; }
.btn-mini.go{
  background: linear-gradient(180deg, var(--mint), #62C6A2);
  color:#08281E; border-color: transparent;
}

.inv-row{
  display:flex; align-items:center; gap:10px;
  margin-top:14px; padding-top:14px; border-top:1px solid var(--line);
  font-size:13px; color: var(--ink-dim);
}
.inv-row b{ color: var(--ink); font-family: var(--font-pixel); font-weight:400; }
.inv-egg{ width:26px; }

/* ============ SHOP ============ */
.shop{
  display:flex; align-items:center; gap:14px;
  background: var(--slot); border:1px solid var(--line);
  border-radius:12px; padding:16px;
}
.shop-egg{ width:52px; flex-shrink:0; }
.shop-info{ flex:1; min-width:0; }
.shop-info b{ font-family: var(--font-pixel); font-weight:400; font-size:11px; display:block; }
.shop-info span{ font-size:12px; color: var(--ink-dim); }

.btn-buy{
  font-family: var(--font-pixel); font-size:10px;
  background: linear-gradient(180deg, var(--gold), #E0A945);
  color:#241A05; border:0; border-radius:10px;
  padding: 12px 18px; cursor:pointer; white-space:nowrap;
  transition: transform .12s, opacity .12s;
}
.btn-buy:hover:not(:disabled){ transform: translateY(-2px); }
.btn-buy:disabled{ opacity:.35; cursor:default; }
.btn-buy b{ font-weight:400; }

.odds{ font-size:11px; color:#6E6890; margin: 12px 0 0; text-align:center; }

/* ============ KOLEKSI ============ */
.dex{
  display:grid; grid-template-columns: repeat(7, 1fr); gap:10px;
}
.dex-cell{
  background: var(--slot); border:1px solid var(--line);
  border-radius:10px; padding:10px 6px; text-align:center;
}
.dex-cell img{ width:100%; margin-bottom:6px; }
.dex-cell.locked img{ filter: brightness(0) invert(.16); }
.dex-cell span{
  font-family: var(--font-pixel); font-size:7px;
  color: var(--ink-dim); display:block; letter-spacing:.4px;
}
.dex-cell.found span{ color: var(--gold); }

/* ============ CATATAN BAWAH ============ */
.demo-note{
  font-size:12px; color:#6E6890; text-align:center;
  max-width: 620px; margin: 8px auto 0; line-height:1.7;
}
.reset{
  display:block; margin: 10px auto 0;
  background:none; border:0; cursor:pointer;
  font-family: var(--font-body); font-size:12px;
  color:#4E4A6E; text-decoration:underline;
}
.reset:hover{ color: #8B7BA8; }

/* ============ TOAST ============ */
.toasts{
  position: fixed; left:50%; bottom: 24px; transform: translateX(-50%);
  z-index:40; display:flex; flex-direction:column; gap:8px; align-items:center;
  pointer-events:none; width: calc(100% - 32px); max-width: 380px;
}
.toast{
  background: var(--panel); border:1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius:10px; padding: 12px 16px;
  font-size:13px; width:100%;
  box-shadow: 0 12px 34px rgba(0,0,0,.5);
  animation: rise .28s ease-out;
}
.toast.good{ border-left-color: var(--mint); }
.toast b{ font-family: var(--font-pixel); font-weight:400; }
@keyframes rise{ from{ opacity:0; transform: translateY(12px) } to{ opacity:1; transform:none } }

/* ============ MODAL ============ */
.modal{
  position: fixed; inset:0; z-index:60;
  background: rgba(6,5,12,.82);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.modal[hidden]{ display:none; }
.modal-box{
  background: var(--panel); border:1px solid var(--line);
  border-radius: var(--radius); padding: 32px 28px;
  max-width: 380px; text-align:center;
  animation: rise .3s ease-out;
}
.modal-mark{ width:52px; margin: 0 auto 14px; }
.modal-box h3{ font-family: var(--font-pixel); font-weight:400; font-size:14px; margin:0 0 10px; }
.modal-box p{ font-size:14px; color: var(--ink-dim); margin: 0 0 22px; }

/* ============ LAYAR KECIL ============ */
@media (max-width: 720px){
  .two-col{ grid-template-columns: 1fr; }
  .island{ grid-template-columns: repeat(3, 1fr); }
  .dex{ grid-template-columns: repeat(4, 1fr); }
  .hud{ flex-wrap:wrap; gap:10px; }
  .hud-stats{ order:3; width:100%; margin-left:0; }
  .hud-stat{ flex:1; justify-content:center; }
  .season{ margin-left:auto; }
}
/* Di HP tombol Buy makan lebar, jadi teksnya kejepit.
   Turunkan tombolnya ke baris sendiri. */
@media (max-width: 520px){
  .shop{ flex-wrap:wrap; }
  .shop-info{ flex: 1 1 60%; }
  .btn-buy{ width:100%; order:3; }
}
@media (max-width: 380px){
  .island{ grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}

/* ============ TAMBAHAN: LEVEL, DETAIL, EKSPEDISI ============ */

.spot{ cursor:pointer; }
.spot.away img{ opacity:.35; filter:none; }
.spot.away .tag{ opacity:1; }
.spot.sel img{ filter: drop-shadow(0 0 16px var(--r-color)); }

/* angka level kecil di kaki roh */
.spot .lv{
  position:absolute; bottom:2%; right:6%;
  font-family: var(--font-pixel); font-size:6px;
  background: var(--r-color, var(--line)); color:#0B0A14;
  padding:2px 4px; border-radius:4px; line-height:1;
}

.island-foot{ margin-top:14px; display:flex; justify-content:center; }

/* panel roh terpilih */
.detail{
  margin-top:14px; padding:14px 16px;
  background: var(--slot); border:1px solid var(--line); border-radius:12px;
  display:flex; align-items:center; gap:14px; position:relative;
}
.detail img{ width:56px; flex-shrink:0; }
.detail-info{ display:flex; flex-direction:column; gap:3px; flex:1; min-width:0; }
.detail-info b{ font-family: var(--font-pixel); font-weight:400; font-size:13px; }
.detail-sub{ font-size:12px; }
.detail-rate{ font-size:12px; color: var(--gold); }
.detail-rate i{ color: var(--mint); font-style:normal; }
.detail-x{
  position:absolute; top:8px; right:10px;
  background:none; border:0; color:var(--ink-dim);
  font-size:18px; line-height:1; cursor:pointer;
}
.detail-x:hover{ color: var(--gold); }

/* ---- ekspedisi ---- */
.exp-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); gap:12px; }
.exp-card{
  position:relative; overflow:hidden; text-align:left; cursor:pointer;
  border:1px solid var(--line); border-radius:12px; padding:0;
  background:var(--slot); min-height:132px;
  transition: border-color .18s, transform .18s;
}
.exp-card:hover:not(:disabled){ transform: translateY(-2px); border-color: var(--gold); }
.exp-card.open{ border-color: var(--mint); }
.exp-card.locked{ opacity:.45; cursor:default; }
.exp-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.exp-card-in{
  position:relative; z-index:2; display:block; padding:12px 14px;
  min-height:132px; display:flex; flex-direction:column; justify-content:flex-end;
  background: linear-gradient(180deg, transparent 20%, rgba(11,10,20,.92) 72%);
}
.exp-el{ font-family: var(--font-pixel); font-size:8px; color: var(--gold); }
.exp-card-in b{ font-family: var(--font-pixel); font-weight:400; font-size:11px; margin:5px 0 4px; }
.exp-meta{ font-size:11px; color: var(--ink-dim); }
.exp-lock{ font-size:10px; color:#F79366; margin-top:4px; }

/* ekspedisi yang sedang berjalan */
.exp-active{
  position:relative; overflow:hidden; border-radius:12px;
  border:1px solid var(--line); background-size:cover; background-position:center;
  min-height:210px; display:flex; align-items:flex-end;
}
.exp-active::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(11,10,20,.45) 0%, rgba(11,10,20,.94) 75%);
}
.exp-active-in{ position:relative; z-index:2; padding:20px; width:100%; text-align:center; }
.exp-active-in h3{ font-family: var(--font-pixel); font-weight:400; font-size:13px; margin:6px 0 12px; }
.exp-party{ display:flex; justify-content:center; gap:8px; margin-bottom:12px; }
.exp-party img{ width:46px; animation: bob 3s ease-in-out infinite; }
.exp-party img:nth-child(2){ animation-delay:.3s }
.exp-party img:nth-child(3){ animation-delay:.6s }
.exp-timer{
  font-family: var(--font-pixel); font-size:20px; color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.exp-hint{ display:block; font-size:11px; color: var(--ink-dim); margin-top:7px; }

/* pemilih anggota party */
.party{
  margin-top:14px; padding:16px;
  background: var(--slot); border:1px solid var(--mint); border-radius:12px;
}
.party-head{ font-size:13px; color: var(--ink-dim); margin:0 0 12px; }
.party-row{ display:flex; gap:10px; flex-wrap:wrap; }
.party-pick{
  background: var(--panel); border:1px solid var(--line); border-radius:10px;
  padding:9px 8px 7px; cursor:pointer; width:82px; text-align:center;
  transition: border-color .15s, transform .15s;
}
.party-pick:hover{ transform: translateY(-2px); }
.party-pick.on{ border-color: var(--r-color, var(--mint)); background:#1F1E33; }
.party-pick img{ width:44px; margin:0 auto 5px; }
.party-pick span{ display:block; font-family: var(--font-pixel); font-size:7px; color: var(--ink); }
.party-pick small{ display:block; font-size:10px; color: var(--ink-dim); margin-top:3px; }
.party-foot{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:14px; padding-top:12px; border-top:1px solid var(--line);
  font-size:12px; color: var(--ink-dim); flex-wrap:wrap;
}

@media (max-width: 520px){
  .detail{ flex-wrap:wrap; }
  .detail .btn-mini{ width:100%; }
  .party-foot .btn-buy{ width:100%; }
}

/* ============ TAMBAHAN: AWAN, HARIAN, PELEBURAN ============ */

.cloud-btn{
  flex-shrink:0; cursor:pointer;
  border:1px solid var(--line); background: var(--panel);
  color: var(--ink-dim); border-radius:999px;
  padding:8px 13px; font-family: var(--font-pixel); font-size:9px;
  white-space:nowrap; transition: color .18s, border-color .18s;
}
.cloud-btn:hover:not(:disabled){ color: var(--gold); border-color: var(--gold); }
.cloud-btn.on{ color: var(--mint); border-color: rgba(143,227,192,.45); }
.cloud-btn:disabled{ opacity:.5; cursor:default; }

.island-foot{ gap:10px; flex-wrap:wrap; }
.island-foot .btn-mini.go{
  background: linear-gradient(180deg, var(--gold), #E0A945);
  color:#241A05; border-color:transparent;
}

.fuse{
  margin-top:14px; padding:16px;
  background: var(--slot); border:1px solid var(--violet); border-radius:12px;
}
.fuse-head{ font-size:13px; color: var(--ink-dim); margin:0 0 12px; }
.fuse-row{ display:flex; gap:10px; flex-wrap:wrap; }
.party-pick.blocked{ opacity:.28; cursor:default; }
.party-pick.match{ box-shadow: inset 0 0 0 1px rgba(243,196,107,.5); }
.party-hint{ font-size:12px; color:#8B84AD; }

@media (max-width: 720px){
  .cloud-btn{ order:2; }
  .island-foot{ flex-direction:column; }
  .island-foot .btn-mini{ width:100%; }
}