:root{
  --f-display:"Baloo 2",system-ui,sans-serif;
  --f-ui:"Inter",system-ui,sans-serif;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;

  --t-xs:11px; --t-sm:13px; --t-md:15px; --t-lg:19px; --t-xl:26px; --t-2xl:34px;

  --abyss:#04141f;
  --deep:#072634;
  --panel:rgba(9,34,47,.82);
  --panel-2:rgba(6,25,35,.9);
  --line:rgba(120,214,235,.16);
  --line-hi:rgba(120,214,235,.34);
  --ink:#e8f6fb;
  --ink-2:#8fb2c0;
  --aqua:#37d8e8;
  --gold:#f7c744;
  --green:#4ade80;
  --red:#f87171;

  --r-sm:8px; --r-md:14px; --r-lg:22px;
  --sh-card:0 1px 0 rgba(255,255,255,.05) inset, 0 18px 40px -20px rgba(0,0,0,.9);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--f-ui);
  font-size:var(--t-md);
  color:var(--ink);
  background:
    radial-gradient(120% 80% at 50% -10%, #0d4a5e 0%, #072634 45%, #04141f 100%);
  min-height:100vh;
  overflow-x:hidden;
}

.caustics{
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(50% 35% at 20% 0%, rgba(55,216,232,.12), transparent 70%),
    radial-gradient(45% 40% at 85% 15%, rgba(74,222,128,.07), transparent 70%),
    radial-gradient(60% 50% at 50% 100%, rgba(4,20,31,.9), transparent 60%);
}

/* ---------- topbar ---------- */
.topbar{
  position:relative; z-index:2;
  display:flex; align-items:center; gap:var(--s6);
  padding:var(--s4) var(--s6);
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(7,38,52,.92), rgba(7,38,52,.55));
  backdrop-filter:blur(14px);
}
.brand{display:flex; align-items:center; gap:var(--s3)}
.brand-mark{width:34px;height:34px;color:var(--aqua);filter:drop-shadow(0 0 12px rgba(55,216,232,.45))}
.brand strong{display:block; font-family:var(--f-display); font-size:var(--t-lg); letter-spacing:.2px}
.brand span{display:block; font-size:var(--t-xs); color:var(--ink-2); letter-spacing:.9px; text-transform:uppercase}

.switchers{display:flex; gap:var(--s4); margin-left:auto}
.field{display:flex; flex-direction:column; gap:var(--s1)}
.field>span{font-size:var(--t-xs); color:var(--ink-2); text-transform:uppercase; letter-spacing:.9px}
select, input[type=text], input[type=search]{
  font-family:var(--f-ui); font-size:var(--t-sm); color:var(--ink);
  background:var(--panel-2); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:9px 12px; min-width:190px;
  outline:none; transition:border-color .16s, box-shadow .16s;
}
select:focus, input:focus{border-color:var(--line-hi); box-shadow:0 0 0 3px rgba(55,216,232,.12)}

.wallet{
  display:flex; flex-direction:column; align-items:flex-end;
  padding-left:var(--s5); border-left:1px solid var(--line);
}
.wallet-label{font-size:var(--t-xs); color:var(--ink-2); text-transform:uppercase; letter-spacing:.9px}
.wallet-value{font-family:var(--f-display); font-size:var(--t-xl); color:var(--gold); line-height:1.1}

/* ---------- layout ---------- */
.layout{
  position:relative; z-index:1;
  display:grid; grid-template-columns:minmax(0,1fr) 400px;
  gap:var(--s6); padding:var(--s6); align-items:start;
}

/* ---------- booth stage ---------- */
.stage{display:flex; align-items:center; gap:var(--s3); min-width:0}
.nav-arrow{
  flex:0 0 auto; width:46px; height:76px;
  font-family:var(--f-display); font-size:30px; line-height:1;
  color:var(--ink); background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r-md); cursor:pointer;
  transition:transform .14s, border-color .14s, background .14s;
}
.nav-arrow:hover{transform:translateY(-2px); border-color:var(--line-hi); background:rgba(13,52,70,.9)}
.nav-arrow:disabled{opacity:.3; cursor:default; transform:none}

.booth{
  position:relative; flex:1 1 auto; min-width:0;
  max-width:1100px; margin:0 auto;
  filter:drop-shadow(0 40px 60px rgba(0,0,0,.55));
}
.booth-art{display:block; width:100%; height:auto; user-select:none; -webkit-user-drag:none}

/* Koordinat papan gelap diukur dari piksel booth.webp (1277x992):
   x 5.1%–95.0%, y 17.8%–55.2%. Slot dan judul dipatok ke rentang itu. */
.booth-sign{
  position:absolute; left:12%; right:12%; top:3.5%;
  display:flex; justify-content:center;
  text-align:center; pointer-events:none;
}
.sign-name{
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(20px,3.1vw,46px); color:#ffe6fb;
  -webkit-text-stroke:.06em #5a2f6b;
  paint-order:stroke fill;
  text-shadow:0 4px 0 rgba(60,20,75,.85);
}

.booth-total{
  position:absolute; left:14%; right:14%; bottom:7.5%;
  display:flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(13px,1.7vw,26px); color:#fff;
  -webkit-text-stroke:.05em #2b3550;
  paint-order:stroke fill;
  text-shadow:0 3px 0 rgba(30,40,60,.75);
  pointer-events:none;
}
.booth-total .coin{
  width:1.05em; height:1.05em; flex:0 0 auto;
  background:radial-gradient(circle at 35% 30%, #ffe98f 0%, #f7c22e 55%, #d18d09 100%);
  clip-path:polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
}
.booth-total .total-value{color:var(--gold)}

/* slot strip */
.slot-strip{
  position:absolute;
  left:7.6%; right:7.6%;
  top:20.4%;
  height:32.5%;
  display:flex; align-items:stretch; gap:1.9%;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  cursor:grab;
}
.slot-strip::-webkit-scrollbar{display:none}
.slot-strip.dragging{cursor:grabbing; scroll-snap-type:none}

/* empat slot per layar, sesuai art asli; sisanya dijangkau lewat scroll */
.slot{
  position:relative; flex:0 0 23.575%; height:100%;
  scroll-snap-align:start;
}
.slot.filled{
  background:url("assets/border.webp") no-repeat center/100% 100%;
  animation:pop .26s cubic-bezier(.2,1.3,.4,1);
}
@keyframes pop{from{transform:scale(.82) translateY(8px); opacity:0}to{transform:none; opacity:1}}

.slot-img{
  position:absolute; left:14%; top:8%; width:72%; height:58%;
  object-fit:contain; filter:drop-shadow(0 4px 8px rgba(0,0,0,.5));
}
.slot-img.err{background:rgba(255,255,255,.08); border-radius:8px}
.slot-price{
  position:absolute; left:50%; right:4%; top:81.5%;
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(7px,.66vw,12px); color:#07330f;
  text-align:center; line-height:1; white-space:nowrap;
  text-shadow:0 1px 0 rgba(255,255,255,.4);
}
.slot-remove{
  position:absolute; top:-6px; right:-6px; width:22px; height:22px;
  border-radius:50%; border:1px solid rgba(0,0,0,.4);
  background:var(--red); color:#2a0707; font-size:12px; font-weight:700;
  cursor:pointer; opacity:0; transition:opacity .14s, transform .14s;
}
.slot:hover .slot-remove{opacity:1}
.slot-remove:hover{transform:scale(1.12)}

.slot.empty{
  border:2px dashed rgba(160,235,247,.3);
  border-radius:var(--r-md);
  background:rgba(6,28,40,.42);
  display:flex; align-items:center; justify-content:center;
  color:rgba(160,235,247,.65);
  font-family:var(--f-display); font-size:clamp(20px,2.4vw,38px); line-height:1;
  cursor:pointer;
  transition:border-color .16s, background .16s, transform .16s;
}
.slot.empty:hover{border-color:var(--aqua); color:var(--aqua); background:rgba(10,48,66,.6); transform:translateY(-3px)}

/* ---------- panels ---------- */
.side{display:flex; flex-direction:column; gap:var(--s5); min-width:0}
.panel{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:var(--s5); box-shadow:var(--sh-card);
  backdrop-filter:blur(10px);
}
.panel-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:var(--s4)}
.panel-head h2{margin:0; font-family:var(--f-display); font-size:var(--t-lg); font-weight:700}
.muted{color:var(--ink-2); font-size:var(--t-xs); letter-spacing:.6px; text-transform:uppercase}

.inv-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s3); max-height:320px; overflow-y:auto}
.inv-card{
  position:relative; padding:var(--s2); border-radius:var(--r-md);
  border:1px solid var(--line); background:rgba(4,20,31,.55);
  cursor:pointer; text-align:center;
  transition:transform .14s, border-color .14s;
}
.inv-card:hover{transform:translateY(-3px); border-color:var(--line-hi)}
.inv-card.listed{opacity:.45}
.inv-card img{width:100%; aspect-ratio:1; object-fit:contain}
.inv-card .nm{display:block; font-size:var(--t-xs); color:var(--ink-2); margin-top:var(--s1); line-height:1.25;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
.badge{
  position:absolute; top:4px; right:4px; min-width:20px; padding:1px 5px;
  border-radius:999px; background:var(--deep); border:1px solid var(--line-hi);
  font-size:10px; font-weight:700;
}
.tier-dot{position:absolute; top:6px; left:6px; width:7px; height:7px; border-radius:50%}

.sum-row{display:flex; gap:var(--s5); padding:var(--s3) 0 var(--s4); border-bottom:1px solid var(--line); margin-bottom:var(--s3)}
.sum-row div{display:flex; flex-direction:column; gap:2px}
.sum-row strong{font-family:var(--f-display); font-size:var(--t-lg)}

.sale-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--s2); max-height:340px; overflow-y:auto}
.sale{display:grid; grid-template-columns:36px 1fr auto; gap:var(--s3); align-items:center;
  padding:var(--s2); border-radius:var(--r-sm); background:rgba(4,20,31,.45)}
.sale img{width:36px; height:36px; object-fit:contain}
.sale .nm{font-size:var(--t-sm); line-height:1.2}
.sale .meta{font-size:var(--t-xs); color:var(--ink-2)}
.sale .price{font-family:var(--f-display); color:var(--gold); font-size:var(--t-md); text-align:right}
.chip{display:inline-block; padding:1px 7px; border-radius:999px; font-size:10px; font-weight:700; color:#04141f; margin-left:6px}

.key-row{display:flex; gap:var(--s2); align-items:center; margin-bottom:var(--s3)}
.key-val{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  padding:8px 10px; border-radius:var(--r-sm); background:rgba(4,20,31,.45);
  border:1px solid var(--line); font-size:var(--t-xs); letter-spacing:.5px}
.key-load{width:100%}
.key-hint{margin:var(--s2) 0 0; text-transform:none; letter-spacing:0}

/* ---------- modal ---------- */
.modal-backdrop[hidden]{display:none}
.modal-backdrop{
  position:fixed; inset:0; z-index:10; display:grid; place-items:center;
  background:rgba(2,10,16,.72); backdrop-filter:blur(6px);
  animation:fade .16s ease;
}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{
  width:min(880px,92vw); max-height:88vh; display:flex; flex-direction:column;
  background:linear-gradient(180deg,#0a2f41,#061c28);
  border:1px solid var(--line-hi); border-radius:var(--r-lg);
  box-shadow:0 40px 90px -30px #000;
  animation:rise .2s cubic-bezier(.2,1,.3,1);
}
@keyframes rise{from{transform:scale(.96) translateY(10px); opacity:0}to{transform:none; opacity:1}}
.modal-head{display:flex; align-items:center; justify-content:space-between; padding:var(--s5) var(--s5) var(--s3)}
.modal-head h2{margin:0; font-family:var(--f-display); font-size:var(--t-xl)}
.icon-btn{background:none; border:0; color:var(--ink-2); font-size:18px; cursor:pointer; padding:6px}
.icon-btn:hover{color:var(--ink)}

.modal-filters{display:flex; flex-direction:column; gap:var(--s2); padding:0 var(--s5) var(--s3)}
.chips{display:flex; flex-wrap:wrap; gap:var(--s2)}
.chip-btn{
  font-family:var(--f-ui); font-size:var(--t-xs); letter-spacing:.5px;
  padding:5px 12px; border-radius:999px; cursor:pointer;
  background:rgba(4,20,31,.6); border:1px solid var(--line); color:var(--ink-2);
  transition:.14s;
}
.chip-btn:hover{color:var(--ink); border-color:var(--line-hi)}
.chip-btn.on{background:var(--aqua); border-color:var(--aqua); color:#04141f; font-weight:700}

.pick-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(108px,1fr)); gap:var(--s3);
  padding:var(--s3) var(--s5); overflow-y:auto; flex:1 1 auto; min-height:180px;
}
.pick{
  position:relative; padding:var(--s2); border-radius:var(--r-md); cursor:pointer;
  border:1px solid var(--line); background:rgba(4,20,31,.5); text-align:center;
  transition:transform .14s, border-color .14s;
}
.pick:hover{transform:translateY(-3px); border-color:var(--line-hi)}
.pick.on{border-color:var(--aqua); box-shadow:0 0 0 2px rgba(55,216,232,.28)}
.pick img{width:100%; aspect-ratio:1; object-fit:contain}
.pick .nm{font-size:var(--t-xs); line-height:1.25; margin-top:4px; min-height:2.4em}
.pick .tr{font-size:10px; font-weight:700; letter-spacing:.6px; text-transform:uppercase}

.modal-foot{
  display:flex; align-items:flex-end; gap:var(--s4);
  padding:var(--s4) var(--s5) var(--s5); border-top:1px solid var(--line);
}
.picked{flex:1 1 160px; min-width:120px; display:flex; align-items:center; gap:var(--s3); font-size:var(--t-sm)}
.picked img{width:38px; height:38px; object-fit:contain}
.price-field{display:flex; flex-direction:column; gap:var(--s1); flex:0 1 auto; min-width:0}
.price-field>span{font-size:var(--t-xs); color:var(--ink-2); text-transform:uppercase; letter-spacing:.9px}
.price-field input{min-width:0; width:150px; font-family:var(--f-display); font-size:var(--t-lg); color:var(--gold)}
.modal-actions{display:flex; gap:var(--s2); margin-left:auto; padding-left:var(--s3)}
.btn{
  font-family:var(--f-display); font-size:var(--t-md); font-weight:700;
  padding:11px 22px; border-radius:var(--r-sm); border:1px solid transparent; cursor:pointer;
  transition:transform .14s, filter .14s;
}
.btn:hover:not(:disabled){transform:translateY(-2px)}
.btn.primary{background:linear-gradient(180deg,#5ef08a,#2eb85f); color:#052813}
.btn.ghost{background:transparent; border-color:var(--line-hi); color:var(--ink)}
.btn:disabled{opacity:.4; cursor:default}

.empty-note{grid-column:1/-1; padding:var(--s6) 0; text-align:center; color:var(--ink-2)}

@media (max-width:1279px){
  .layout{grid-template-columns:1fr}
  .side{flex-direction:row; flex-wrap:wrap}
  .side>.panel{flex:1 1 340px}
}

/* ---------- gerbang login ---------- */
.gate{position:fixed; inset:0; z-index:20; display:grid; place-items:center}
.gate[hidden]{display:none}
.gate-box{
  text-align:center; padding:var(--s7) var(--s6);
  background:var(--panel); border:1px solid var(--line-hi);
  border-radius:var(--r-lg); box-shadow:var(--sh-card); backdrop-filter:blur(10px);
}
.gate-box h1{margin:0; font-family:var(--f-display); font-size:var(--t-2xl)}
.gate-box p{margin:var(--s2) 0 var(--s5)}
#app[hidden]{display:none}

/* ---------- topbar tambahan ---------- */
.kuota{font-family:var(--f-display); font-size:var(--t-lg); color:var(--aqua)}
.user-box{display:flex; align-items:center; gap:var(--s3); padding-left:var(--s5); border-left:1px solid var(--line)}
.user-box span{font-size:var(--t-sm); color:var(--ink-2)}
.btn.sm{font-size:var(--t-sm); padding:7px 14px}

/* ---------- slot tambahan ---------- */
.slot.filled{cursor:pointer}
.slot.mati{filter:grayscale(.8) brightness(.7)}
.slot-done{
  position:absolute; left:50%; top:38%; transform:translateX(-50%) rotate(-8deg);
  padding:2px 8px; border-radius:999px; background:var(--green); color:#052813;
  font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.6px;
}
.pick .badge{z-index:1}

/* ---------- daftar akun ---------- */
.acc-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--s2); max-height:280px; overflow-y:auto}
.acc{display:flex; align-items:center; gap:var(--s3); padding:var(--s3);
  border-radius:var(--r-sm); background:rgba(4,20,31,.45)}
.acc.offline{opacity:.5}
.acc .nm{font-size:var(--t-sm); line-height:1.2}
.acc .meta{font-size:var(--t-xs); color:var(--ink-2)}
.acc-err{font-size:var(--t-xs); color:var(--red); margin-top:2px}
.acc>div:first-child{flex:1 1 auto; min-width:0}
.switch{
  flex:0 0 auto; width:42px; height:24px; border-radius:999px; cursor:pointer;
  border:1px solid var(--line-hi); background:rgba(4,20,31,.8); position:relative;
  transition:background .16s, border-color .16s;
}
.switch::after{
  content:""; position:absolute; top:2px; left:2px; width:18px; height:18px;
  border-radius:50%; background:var(--ink-2); transition:transform .16s, background .16s;
}
.switch.on{background:var(--green); border-color:var(--green)}
.switch.on::after{transform:translateX(18px); background:#052813}

/* ---------- bar simpan ---------- */
.savebar{
  position:fixed; left:50%; bottom:var(--s5); transform:translateX(-50%); z-index:9;
  display:flex; align-items:center; gap:var(--s3);
  padding:var(--s3) var(--s4); border-radius:999px;
  background:var(--panel-2); border:1px solid var(--line-hi);
  box-shadow:0 20px 50px -20px #000; backdrop-filter:blur(12px);
  animation:rise .2s cubic-bezier(.2,1,.3,1);
}
.savebar[hidden]{display:none}
.savebar span{font-size:var(--t-sm); color:var(--ink-2)}

/* ---------- toast ---------- */
.toast{
  position:fixed; left:50%; top:var(--s5); transform:translateX(-50%); z-index:30;
  padding:var(--s3) var(--s5); border-radius:999px;
  background:var(--green); color:#052813; font-weight:700; font-size:var(--t-sm);
  box-shadow:0 20px 50px -20px #000; animation:rise .2s cubic-bezier(.2,1,.3,1);
}
.toast[hidden]{display:none}
.toast.buruk{background:var(--red); color:#2a0707}