/* Lobi ala LifeAfter + layar loading sinematik. Memuat setelah game.css (aturan di sini menang). */

/* ---------- loading ---------- */
#loading { background: #07070a; display: block; overflow: hidden; z-index: 70; transition: opacity .7s ease; }
#loading.fade { opacity: 0; }
#loading .ld-art, #loading .ld-img { position: absolute; inset: 0; }
#loading .ld-img { background: center/cover no-repeat; opacity: 0; transform: scale(1.04); transition: opacity 1.6s ease; }
#loading .ld-img.on { opacity: 1; animation: ldKen 14s ease-out forwards; }
@keyframes ldKen { from { transform: scale(1.04) translate(0, 0); } to { transform: scale(1.12) translate(-1.5%, -1%); } }
#loading .ld-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 5, 8, 0.86) 0%, rgba(5, 5, 8, 0.45) 34%, rgba(5, 5, 8, 0) 60%), linear-gradient(0deg, rgba(5, 5, 8, 0.92) 0%, rgba(5, 5, 8, 0.35) 22%, rgba(5, 5, 8, 0) 40%), linear-gradient(180deg, rgba(5, 5, 8, 0.55), rgba(5, 5, 8, 0) 22%); }
#loading .ld-grain { position: absolute; inset: 0; opacity: .06; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,.6) 1px, transparent 1px); background-size: 3px 3px; mix-blend-mode: overlay; }
#loading .ld-logo { position: absolute; left: clamp(24px, 5vw, 72px); top: clamp(24px, 6vh, 64px); }
.ld-logo .w, .lb-word { font-family: var(--font-body); font-weight: 300; font-size: clamp(34px, 4.4vw, 64px); letter-spacing: .26em; text-transform: uppercase; line-height: 1; color: #fff; text-shadow: 0 2px 24px rgba(0, 0, 0, .6); }
.ld-logo .w span, .lb-word span { display: block; font-weight: 600; letter-spacing: .32em; margin-top: 6px; background: linear-gradient(90deg, #ffb15c, #ff7a3a 55%, #b77bff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ld-logo .s, .lb-sub { margin-top: 12px; font-family: var(--font-body); font-weight: 500; font-size: 12px; letter-spacing: .34em; text-transform: uppercase; color: rgba(236, 228, 216, .7); }
#loading .ld-lore { position: absolute; left: clamp(24px, 5vw, 72px); bottom: 150px; max-width: 460px; opacity: 0; }
#loading .ld-lore.in { animation: ldIn 1.2s ease forwards; }
@keyframes ldIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.ld-lore .k { font-family: var(--font-body); font-weight: 600; font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: #ffb15c; margin-bottom: 8px; }
.ld-lore p { margin: 0; font-size: 16px; line-height: 1.6; color: #e9e1d4; text-shadow: 0 1px 8px rgba(0, 0, 0, .7); }
#loading .ld-bottom { position: absolute; left: clamp(24px, 5vw, 72px); right: clamp(24px, 5vw, 72px); bottom: 36px; }
.ld-tip { display: flex; gap: 12px; align-items: baseline; margin-bottom: 14px; min-height: 20px; }
.ld-tip span { flex: none; font-family: var(--font-body); font-weight: 600; font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: #0b0a0c; background: #ffb15c; padding: 3px 7px; border-radius: 2px; }
.ld-tip em { font-style: normal; font-size: 14px; color: #d8d0c4; opacity: 0; }
.ld-tip em.in { animation: ldIn .6s ease forwards; }
.ld-bar { position: relative; height: 3px; background: rgba(255, 255, 255, .12); border-radius: 2px; }
.ld-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, #ff7a3a, #ffb15c); border-radius: 2px; box-shadow: 0 0 12px rgba(255, 150, 70, .6); }
.ld-bar b { position: absolute; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: #ffe2b8; box-shadow: 0 0 14px 3px rgba(255, 170, 90, .8); }
.ld-row { display: flex; justify-content: space-between; margin-top: 10px; font-family: var(--font-body); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(236, 228, 216, .65); }
.ld-pct { font-variant-numeric: tabular-nums; color: #fff; }

/* ---------- lobi ---------- */
#title { background: transparent !important; justify-content: flex-start; display: block; pointer-events: none; }
#title::before { display: none; }
#title > * { pointer-events: auto; }
body.in-lobby #hud, body.in-lobby #fps { display: none !important; }
.lb-vignette { position: absolute; inset: 0; pointer-events: none !important; background: linear-gradient(90deg, rgba(5, 5, 8, .78) 0%, rgba(5, 5, 8, .35) 26%, rgba(5, 5, 8, 0) 44%), linear-gradient(270deg, rgba(5, 5, 8, .6) 0%, rgba(5, 5, 8, 0) 30%), linear-gradient(0deg, rgba(5, 5, 8, .8) 0%, rgba(5, 5, 8, 0) 28%), linear-gradient(180deg, rgba(5, 5, 8, .45) 0%, rgba(5, 5, 8, 0) 18%); }
.lb-logo { position: absolute; left: clamp(24px, 4vw, 64px); top: clamp(22px, 5vh, 56px); animation: lbIn .8s ease both; }
.lb-menu { position: absolute; left: clamp(24px, 4vw, 64px); top: 50%; transform: translateY(-34%); display: flex; flex-direction: column; gap: 6px; min-width: 250px; animation: lbIn .8s .1s ease both; }
@keyframes lbIn { from { opacity: 0; transform: translate(-10px, var(--ty, 0)); } }
.lb-menu { --ty: -34%; }
.lb-mi { position: relative; display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 18px 0 14px; border: 0; border-left: 2px solid transparent; background: linear-gradient(90deg, rgba(10, 10, 14, .55), rgba(10, 10, 14, 0)); color: #e9e1d4; font-family: var(--font-body); font-weight: 500; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; text-align: left; cursor: pointer; transition: background .2s, border-color .2s, padding .2s, color .2s; }
.lb-mi:hover, .lb-mi:focus-visible { border-left-color: #ffb15c; background: linear-gradient(90deg, rgba(255, 150, 70, .22), rgba(255, 150, 70, 0)); padding-left: 20px; color: #fff; outline: none; }
.lb-mi i { width: 18px; height: 18px; flex: none; opacity: .85; background: center/contain no-repeat; }
.lb-mi em { margin-left: auto; font-style: normal; font-size: 10px; letter-spacing: .14em; color: #0b0a0c; background: #6fe39a; padding: 2px 6px; border-radius: 2px; }
.mi-new { background-image: url("../assets/ui/icons/wrench.png"); } .mi-rew { background-image: url("../assets/ui/icons/core.png"); }
.mi-set { background-image: url("../assets/ui/icons/craft.png"); } .mi-story { background-image: url("../assets/ui/icons/quest.png"); } .mi-wal { background-image: url("../assets/ui/icons/circuit.png"); } .mi-web { background-image: url("../assets/ui/icons/map.png"); }
a.lb-mi { text-decoration: none; }
.lb-mi em.ext { background: none; color: #a59b8e; font-size: 13px; padding: 0; }
.lb-side { position: absolute; right: clamp(20px, 3vw, 48px); top: clamp(22px, 5vh, 56px); width: 330px; display: flex; flex-direction: column; gap: 12px; animation: lbInR .8s .15s ease both; }
@keyframes lbInR { from { opacity: 0; transform: translateX(10px); } }
.lb-card { background: rgba(10, 10, 14, .62); border: 1px solid rgba(255, 255, 255, .1); border-radius: 6px; padding: 14px 16px; backdrop-filter: blur(6px); }
.lb-card .k { font-family: var(--font-body); font-weight: 600; font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: #ffb15c; }
.lb-surv { display: grid; grid-template-columns: 58px 1fr; gap: 12px 12px; align-items: center; }
.lb-av { width: 58px; height: 58px; border-radius: 50%; background: url("../assets/ui/portrait-madox.webp") center/cover; border: 2px solid rgba(255, 255, 255, .5); box-shadow: 0 0 0 3px rgba(0, 0, 0, .4); }
.lb-who .n { font-family: var(--font-body); font-weight: 600; font-size: 18px; color: #fff; margin-top: 2px; }
.lb-who .n small { font-weight: 500; font-size: 11px; letter-spacing: .14em; color: #a59b8e; margin-left: 4px; }
.lb-who .w { font-size: 12px; color: #a59b8e; margin-top: 2px; font-variant-numeric: tabular-nums; }
.lb-stat { grid-column: 1 / -1; font-size: 12.5px; color: #cfc8bd; line-height: 1.45; }
.lb-stat .ok { color: #6fe39a; font-weight: 600; } .lb-stat .bad { color: #ff7a6a; font-weight: 600; }
.lb-prog { grid-column: 1 / -1; display: grid; gap: 6px; }
.lb-prog .row { display: flex; justify-content: space-between; font-size: 12px; color: #a59b8e; }
.lb-prog .row b { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
.lb-prog .bar { height: 4px; background: rgba(255, 255, 255, .1); border-radius: 2px; overflow: hidden; }
.lb-prog .bar i { display: block; height: 100%; background: linear-gradient(90deg, #ff7a3a, #ffb15c); }
.lb-news .it { margin-top: 10px; padding-left: 10px; border-left: 2px solid rgba(255, 177, 92, .5); }
.lb-news .it b { display: block; font-size: 13.5px; color: #fff; font-weight: 600; }
.lb-news .it span { display: block; font-size: 12.5px; color: #b9b0a3; line-height: 1.45; margin-top: 2px; }
.lb-news .it.soon { border-left-color: rgba(183, 123, 255, .6); }
.lb-bottom { position: absolute; left: 50%; bottom: clamp(48px, 9vh, 90px); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 12px; animation: lbUp .9s .25s ease both; }
@keyframes lbUp { from { opacity: 0; transform: translate(-50%, 10px); } }
.lb-start { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 300px; padding: 14px 40px 12px; border: 1px solid rgba(255, 200, 140, .7); border-radius: 4px; background: linear-gradient(180deg, rgba(255, 150, 70, .92), rgba(214, 96, 30, .92)); color: #1a0f08; text-decoration: none; cursor: pointer; box-shadow: 0 10px 34px rgba(255, 120, 40, .35), inset 0 1px 0 rgba(255, 255, 255, .35); transition: transform .15s, box-shadow .2s, filter .2s; clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%); }
.lb-start::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .35) 48%, transparent 66%); background-size: 250% 100%; animation: lbShine 3.4s ease-in-out infinite; pointer-events: none; }
@keyframes lbShine { 0%, 60% { background-position: 120% 0; } 100% { background-position: -120% 0; } }
.lb-start:hover { transform: translateY(-1px); box-shadow: 0 14px 40px rgba(255, 120, 40, .5), inset 0 1px 0 rgba(255, 255, 255, .4); filter: brightness(1.05); }
.lb-start:active { transform: translateY(1px) scale(.99); }
.lb-start[disabled] { filter: grayscale(.6) brightness(.8); cursor: wait; }
.lb-start b { font-family: var(--font-body); font-weight: 700; font-size: 20px; letter-spacing: .24em; text-transform: uppercase; }
.lb-start small { font-family: var(--font-body); font-weight: 600; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; opacity: .78; }
.lb-start.buy { background: linear-gradient(180deg, rgba(120, 220, 160, .95), rgba(60, 170, 110, .95)); border-color: rgba(170, 255, 200, .7); }
.lb-server { display: flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(236, 228, 216, .7); text-shadow: 0 1px 4px #000; }
.lb-server i { width: 7px; height: 7px; border-radius: 50%; background: #6fe39a; box-shadow: 0 0 8px #6fe39a; }
.lb-foot { position: absolute; left: clamp(24px, 4vw, 64px); right: clamp(20px, 3vw, 48px); bottom: 18px; display: flex; align-items: center; gap: 16px; font-size: 12px; color: rgba(236, 228, 216, .55); }
.lb-foot a { color: rgba(236, 228, 216, .7); text-decoration: none; border-bottom: 1px dotted rgba(236, 228, 216, .3); }
.lb-foot a:hover { color: #ffb15c; }
.lb-foot .ver { margin-left: auto; letter-spacing: .1em; }
.lb-dev { background: none; border: 1px dashed rgba(255, 255, 255, .25); color: #a59b8e; font-size: 11px; padding: 4px 8px; cursor: pointer; }
.lb-modal { position: absolute; inset: 0; background: rgba(4, 4, 6, .6); backdrop-filter: blur(3px); display: grid; place-items: center; z-index: 5; }
.lb-mbox { position: relative; width: min(460px, 92vw); max-height: 82vh; overflow: auto; padding: 22px 24px; background: linear-gradient(180deg, rgba(22, 20, 24, .98), rgba(12, 11, 14, .98)); border: 1px solid rgba(255, 255, 255, .12); border-top: 2px solid #ffb15c; border-radius: 6px; box-shadow: 0 20px 60px rgba(0, 0, 0, .6); }
.lb-mbox .k { font-family: var(--font-body); font-weight: 600; font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: #ffb15c; }
.lb-mbox h3 { margin: 4px 0 12px; font-family: var(--font-body); font-weight: 600; font-size: 22px; color: #fff; }
.lb-mbox p { font-size: 14px; line-height: 1.6; color: #d8d0c4; margin: 0 0 10px; }
.lb-mbox .fine { font-size: 12px; color: #a59b8e; margin-top: 12px; }
.lb-x { position: absolute; right: 10px; top: 8px; width: 30px; height: 30px; border: 0; background: none; color: #a59b8e; font-size: 22px; cursor: pointer; }
.lb-x:hover { color: #fff; }
.lb-wallets { display: grid; gap: 8px; }
.lb-wbtn { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 4px; background: rgba(255, 255, 255, .04); color: #fff; font-size: 14px; cursor: pointer; }
.lb-wbtn:hover { border-color: #ffb15c; background: rgba(255, 150, 70, .12); }
.lb-wbtn img { width: 24px; height: 24px; border-radius: 5px; }
.lb-rew { display: grid; gap: 4px; }
.lb-rew .r { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 4px; background: rgba(255, 255, 255, .04); font-size: 13.5px; color: #d8d0c4; }
.lb-rew .r .n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; background: rgba(255, 255, 255, .1); color: #fff; }
.lb-rew .r b { color: #ffd28a; font-variant-numeric: tabular-nums; }
.lb-rew .r.done { background: rgba(111, 227, 154, .1); } .lb-rew .r.done .n { background: #6fe39a; color: #0b0a0c; }
.lb-rew .r.lock { opacity: .55; }
@media (max-width: 1100px) { .lb-side { width: 280px; } .lb-menu { min-width: 210px; } }
@media (max-width: 860px) { .lb-side { display: none; } }

/* logo game (gambar): baja berpaku + garis cahaya oranye */
.lb-logoimg, .ld-logoimg { display: block; width: clamp(300px, 30vw, 520px); height: auto; filter: drop-shadow(0 6px 22px rgba(0, 0, 0, .75)) drop-shadow(0 0 2px rgba(0, 0, 0, .6)); user-select: none; -webkit-user-drag: none; }
.ld-logoimg { animation: ldLogo 1.4s ease both; }
@keyframes ldLogo { from { opacity: 0; transform: translateY(-6px) scale(.985); filter: blur(4px) drop-shadow(0 6px 22px rgba(0, 0, 0, .75)); } }
.lb-sub, .ld-logo .s { margin-left: 4px; }