:root {
  --bg:#0a0a0f;
  --sur:#12121a;
  --bor:#2a2a3a;
  --acc:#00ff88;
  --txt:#e8e8f0;
  --mut:#5a5a7a;
}

* {
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html,body {
  width:100%;
  height:100%;
  overflow:hidden;
  background:var(--bg);
  color:var(--txt);
  font-family:'Syne',sans-serif;
}

body::before {
  content:'';
  position:fixed;
  inset:0;
  background-image:linear-gradient(var(--bor) 1px,transparent 1px),linear-gradient(90deg,var(--bor) 1px,transparent 1px);
  background-size:40px 40px;
  opacity:0.3;
  z-index:0;
  pointer-events:none;
}

/* MENU */
#menu {
  position:fixed;
  inset:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  z-index:10;
  display:none;
  align-items:flex-start;
  justify-content:center;
  padding:16px;
}

.wrap {
  position:relative;
  z-index:1;
  width:100%;
  max-width:420px;
  padding:4px 4px 16px;
}

.rgt {
  font-size:clamp(14px,5vw,21px);
  font-weight:800;
  letter-spacing:1px;
  min-width:0;
  overflow:hidden;
  background:linear-gradient(90deg,#f00,#f70,#ff0,#0f0,#07f,#80f,#f00);
  background-size:200% auto;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:rgb 3s linear infinite;
}

@keyframes rgb {
  to {
    background-position:200% center;
  }
}

.sub {
  font-size:11px;
  font-family:'Space Mono',monospace;
  color:var(--mut);
  margin-top:3px;
  letter-spacing:1px;
}

.wbar {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:20px;
  gap:8px;
}

.wbar>div:first-child {
  min-width:0;
  flex:1;
  overflow:hidden;
}

.gc {
  font-size:10px;
  font-family:'Space Mono',monospace;
  font-weight:800;
  white-space:nowrap;
  padding:4px 11px;
  border-radius:20px;
  position:relative;
  background:linear-gradient(90deg,#f00,#f70,#ff0,#0f0,#07f,#80f,#f00);
  background-size:200% auto;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:rgb 3s linear infinite;
}

.gc::before {
  content:'';
  position:absolute;
  inset:0;
  border-radius:20px;
  padding:1px;
  background:linear-gradient(90deg,#f00,#f70,#ff0,#0f0,#07f,#80f,#f00);
  background-size:200% auto;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  animation:rgb 3s linear infinite;
}

.glist {
  display:flex;
  flex-direction:column;
  gap:10px;
}

.gi {
  display:flex;
  align-items:center;
  gap:12px;
  cursor:pointer;
  text-align:left;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
  transition:opacity 0.12s;
}

.gi:active {
  opacity:0.7;
}

.gl {
  flex-shrink:0;
  width:56px;
  height:56px;
  border-radius:8px;
  border:1px solid var(--bor);
  background:var(--sur);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.gl img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.gtx {
  min-width:0;
  flex:1;
  overflow:hidden;
}

.gt {
  font-size:14px;
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-shadow:0 1px 3px rgba(0,0,0,0.9);
}

.gd {
  font-size:10px;
  color:#aab0c8;
  font-family:'Space Mono',monospace;
  line-height:1.4;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  margin-top:1px;
  text-shadow:0 1px 3px rgba(0,0,0,0.9);
}

.gr {
  font-size:11px;
  color:#ffd54a;
  font-family:'Space Mono',monospace;
  margin-top:2px;
  text-shadow:0 1px 3px rgba(0,0,0,0.9);
}

/* GAME SCREEN */
#gs {
  position:fixed;
  inset:0;
  z-index:20;
  display:none;
  flex-direction:column;
  background:#000;
}

.topbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:9px 14px;
  background:#12121a;
  border-bottom:1px solid #2a2a3a;
  flex-shrink:0;
}

.gtitle {
  font-size:11px;
  font-family:'Space Mono',monospace;
  color:#00ff88;
  letter-spacing:2px;
  text-transform:uppercase;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:160px;
}

#bbtn {
  background:none;
  border:1px solid #2a2a3a;
  color:#5a5a7a;
  font-family:'Space Mono',monospace;
  font-size:11px;
  cursor:pointer;
  padding:6px 13px;
  border-radius:8px;
  -webkit-tap-highlight-color:transparent;
  letter-spacing:1px;
  flex-shrink:0;
}

#bbtn:active {
  color:#00ff88;
  border-color:#00ff88;
}

#gframe {
  flex:1;
  width:100%;
  height:100%;
  border:none;
  display:block;
  background:#000;
}

/* ---------- WALLPAPER (HP: background.jpg, PC: background-pc.jpg, fallback ke background.jpg) ---------- */
:root {
  --wall:url('assets/background.jpg');
}
body.mode-pc {
  --wall:url('assets/background-pc.jpg'),url('assets/background.jpg');
}
#menu {
  background-image:linear-gradient(rgba(8,8,12,0.2),rgba(8,8,12,0.5)),var(--wall);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-attachment:fixed;
}

/* ---------- STATE LAYAR: mode -> menu -> game ---------- */
#welcome { position:fixed; inset:0; z-index:30; display:none; padding:22px 20px; overflow-y:auto; }
body[data-screen="welcome"] #welcome { display:flex; }
body[data-screen="loading"] #loader { display:flex; }
body[data-screen="menu"] #menu { display:flex; }
body[data-screen="game"] #gs { display:flex; }

/* ---------- WELCOME ---------- */
#welcome { background:#05060a; }
#welcome::before,
#loader::before { content:''; position:fixed; inset:-24px; z-index:-1; background-image:url('assets/inbg.jpg'),url('assets/background.jpg'); background-size:cover; background-position:center; filter:blur(14px) brightness(0.75); }
.wl-box { margin:auto; width:100%; max-width:440px; text-align:center; }

.wl-hero { width:100%; aspect-ratio:16/9; border-radius:22px; border:1px solid rgba(255,255,255,0.14); background:url('assets/if.jpg') center/cover no-repeat, linear-gradient(135deg,#1b1b2b,#0b0b12); }
.wl-title { margin:26px 0 14px; font-family:'Orbitron','Syne',sans-serif; font-weight:700; font-size:clamp(20px,6.4vw,28px); letter-spacing:4px; color:#fff; }
.wl-logo { font-size:clamp(18px,5.6vw,24px); display:inline-block; margin-bottom:18px; }

.wl-profile { display:flex; align-items:center; gap:16px; text-align:left; padding:14px 16px; margin-bottom:14px; border-radius:18px; border:1px solid rgba(255,255,255,0.12); background:rgba(255,255,255,0.05); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.wl-avatar { flex-shrink:0; width:64px; height:64px; border-radius:50%; border:2px solid rgba(255,255,255,0.25); background:url('assets/avatar.jpg') center/cover no-repeat, linear-gradient(135deg,#2a2a3a,#12121a); }
.wl-info { min-width:0; }
.wl-namerow { display:flex; align-items:center; gap:8px; min-width:0; }
.wl-name { font-size:19px; font-weight:700; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wl-badge { flex-shrink:0; font-size:11px; font-weight:700; color:var(--acc); border:1px solid var(--acc); background:rgba(0,255,136,0.1); padding:2px 9px; border-radius:20px; }
.wl-wa { display:inline-block; margin-top:3px; font-size:13px; font-family:'Space Mono',monospace; color:#c9cde0; text-decoration:none; }
.wl-wa:hover,.wl-wa:focus-visible { color:var(--acc); outline:none; }

.wl-modes { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
.wl-mode { display:flex; align-items:center; justify-content:center; gap:10px; padding:16px 10px; border-radius:18px; border:1px solid rgba(255,255,255,0.12); background:rgba(255,255,255,0.05); color:#c9cde0; font-family:'Syne',sans-serif; font-size:15px; font-weight:700; cursor:pointer; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); -webkit-tap-highlight-color:transparent; transition:border-color .15s,background .15s,color .15s; }
.wl-mode:hover,.wl-mode:focus-visible { border-color:rgba(255,255,255,0.35); outline:none; }
.wl-mode[aria-checked="true"] { border-color:var(--acc); background:rgba(0,255,136,0.1); color:#fff; }

.wl-enter { width:100%; display:flex; align-items:center; justify-content:center; gap:10px; padding:17px 10px; border:none; border-radius:18px; background:#fff; color:#111; font-family:'Syne',sans-serif; font-size:16px; font-weight:700; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:transform .1s,background .15s; }
.wl-enter:hover,.wl-enter:focus-visible { background:#e9fff4; outline:none; }
.wl-enter:active { transform:scale(0.98); }

/* tombol ganti mode di menu */
.wbar-r { display:flex; flex-direction:column; align-items:flex-end; gap:6px; flex-shrink:0; }
#modeBtn { background:rgba(18,18,26,0.6); border:1px solid var(--bor); color:#aab0c8; font-family:'Space Mono',monospace; font-size:10px; padding:4px 10px; border-radius:20px; cursor:pointer; -webkit-tap-highlight-color:transparent; }
#modeBtn:hover,#modeBtn:focus-visible { color:var(--acc); border-color:var(--acc); outline:none; }

/* ---------- HP: iframe penuh, dibatasi 520px kalau layarnya lebar (tablet / dicoba di PC) ---------- */
body.mode-hp #gframe { max-width:520px; align-self:center; }

/* ---------- PC: menu grid lebar, game berada di tengah dan tingginya pas layar ---------- */
body.mode-pc #menu { padding:28px 32px; }
body.mode-pc .wrap { max-width:1100px; }
body.mode-pc .wbar { margin-bottom:26px; }
body.mode-pc .rgt { font-size:30px; }
body.mode-pc .gc { font-size:12px; }
body.mode-pc .glist { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px; }
body.mode-pc .gi { padding:12px; gap:16px; background:rgba(10,10,15,0.55); border:1px solid var(--bor); border-radius:12px; transition:border-color .15s,background .15s; }
body.mode-pc .gi:hover { border-color:var(--acc); background:rgba(10,10,15,0.75); }
body.mode-pc .gl { width:72px; height:72px; border-radius:10px; }
body.mode-pc .gt { font-size:17px; }
body.mode-pc .gd { font-size:11px; }
body.mode-pc .gr { font-size:12px; }
body.mode-pc #gs { background:#07070b; }
body.mode-pc .topbar { padding:10px 24px; }
body.mode-pc .gtitle { font-size:13px; max-width:360px; }
body.mode-pc #bbtn { font-size:12px; cursor:pointer; }
body.mode-pc #bbtn:hover { color:var(--acc); border-color:var(--acc); }
body.mode-pc #gframe { align-self:center; width:min(100%,max(480px,calc((100vh - 50px) * 0.8))); height:auto; border-left:1px solid var(--bor); border-right:1px solid var(--bor); }

@media (prefers-reduced-motion:reduce) {
  .rgt,.gc,.gc::before { animation:none; }
}

/* ---------- LOADING ---------- */
#loader { position:fixed; inset:0; z-index:40; display:none; flex-direction:column; align-items:center; background:#05060a; color:#e4e7f5; }
.ld-center { flex:1; display:flex; align-items:center; justify-content:center; padding-top:4vh; }
.ld-logo { width:clamp(150px,42vw,230px); height:auto; display:block; }
.ld-bottom { width:100%; display:flex; flex-direction:column; align-items:center; gap:16px; padding:0 20px max(48px,7vh); }
.ld-dots { display:flex; gap:12px; }
.ld-dots i { width:9px; height:9px; border-radius:50%; background:#3a3a46; transition:background .12s; }
.ld-dots i.on { background:#fff; }
.ld-bar { width:min(60vw,330px); height:5px; border-radius:3px; background:#2a2a33; overflow:hidden; }
.ld-fill { width:0; height:100%; background:#fff; }
.ld-text { font-family:'Space Mono',monospace; font-size:13px; letter-spacing:1.5px; color:#a9aec4; }

/* ---------- TRANSISI FADE ANTAR LAYAR ---------- */
#welcome.vis,#loader.vis,#menu.vis,#gs.vis { display:flex; }
.slide-in  { z-index:60 !important; will-change:opacity; animation:scrFade var(--tr,450ms) ease-in-out both; }
.slide-out { z-index:50 !important; pointer-events:none; }   /* layar lama tetap terlihat di bawah, layar baru muncul perlahan di atasnya */
#menu.slide-in { background-attachment:scroll; }
@keyframes scrFade { from { opacity:0; } to { opacity:1; } }