/* ADVENTURE MUSLIM — © 2026 Fattana.com
   Warna identitas: Emerald Green, Gold, Sky Blue, Cream, White */
:root{--em:#0f7a5a;--em2:#1f9d74;--em3:#e6f5ef;--gold:#d4a62a;--gold2:#f5c542;--sky:#7ec8f0;--sky2:#e9f6ff;--cream:#fbf5e6;--white:#fff;--ink:#1d2b28;--mut:#6b7c77;--line:#e3ebe7;--err:#d64545;--warn:#c98a10;--ok:#14915f;--r:16px;--sh:0 6px 24px rgba(15,60,45,.10)}
*{box-sizing:border-box}[hidden]{display:none!important}html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:"Nunito","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;color:var(--ink);background:var(--cream);line-height:1.5}
a{color:var(--em)}img{max-width:100%}h1,h2,h3,h4{line-height:1.2;margin:.2em 0 .5em}
code{background:#f1efe6;padding:1px 6px;border-radius:6px}
.muted{color:var(--mut)}.small{font-size:.85rem}.center{text-align:center}.nowrap{white-space:nowrap}
.ok-t{color:var(--ok)}.err-t{color:var(--err)}.warn-t{color:var(--warn)}
/* tombol */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4em;padding:.62em 1.1em;border-radius:12px;border:0;background:#fff;color:var(--ink);font:inherit;font-weight:700;cursor:pointer;text-decoration:none;box-shadow:0 2px 0 rgba(0,0,0,.08),inset 0 0 0 1px var(--line);transition:transform .08s,filter .15s;min-height:42px}
.btn:hover{filter:brightness(1.04)}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.55;cursor:not-allowed}
.btn.primary{background:linear-gradient(180deg,var(--em2),var(--em));color:#fff;box-shadow:0 3px 0 #0a5a42}
.btn.gold{background:linear-gradient(180deg,var(--gold2),var(--gold));color:#3a2a00;box-shadow:0 3px 0 #a17c14}
.btn.danger{background:#fff;color:var(--err);box-shadow:inset 0 0 0 1px #f2c9c9}
.btn.ghost{background:transparent}.btn.ghost-w{background:rgba(255,255,255,.18);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.btn.link{background:none;box-shadow:none;color:var(--em);text-decoration:underline}
.btn.sm{padding:.35em .75em;min-height:32px;font-size:.88rem;border-radius:10px}.btn.big{padding:.85em 1.4em;font-size:1.08rem;width:100%}
.row-btn{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}.inline{display:inline}.inline-form{display:flex;gap:.5rem;flex-wrap:wrap}
/* form */
.form label{display:block;font-weight:700;font-size:.92rem;margin:.6rem 0}
input,select,textarea{width:100%;font:inherit;padding:.6em .8em;border-radius:11px;border:1.5px solid var(--line);background:#fff;color:var(--ink);margin-top:.3rem}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--em2);box-shadow:0 0 0 3px rgba(31,157,116,.15)}
input.sm,select.sm{width:auto;padding:.3em .5em;margin:0;font-size:.85rem}
label.check{display:flex;gap:.5rem;align-items:flex-start;font-weight:600}label.check input{width:auto;margin-top:.25rem}
fieldset{border:1.5px dashed var(--line);border-radius:12px;padding:.6rem 1rem}legend{font-weight:800;padding:0 .4rem}
.checks{display:flex;flex-wrap:wrap;gap:.2rem 1rem}.checks .check{margin:.2rem 0}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1rem}.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:0 1rem}
.alert{padding:.75rem 1rem;border-radius:12px;margin:.6rem 0;background:#eef7f3;border-left:4px solid var(--em2)}
.alert.err{background:#fdeeee;border-color:var(--err)}.alert.warn{background:#fff6e2;border-color:var(--gold)}.alert.info{background:var(--sky2);border-color:var(--sky)}
.tag{display:inline-block;padding:.12em .6em;border-radius:99px;background:var(--em3);color:var(--em);font-size:.78rem;font-weight:800}
.tag.soft{background:#f2f0e8;color:#6a6555}.tag.warn{background:#fff1cf;color:#8a6200}.tag.ok{background:#dcf5e9;color:#0c6b47}
.pill{display:inline-block;padding:.15em .7em;border-radius:99px;background:#eef0ee;font-size:.8rem;font-weight:800}
.pill.ok,.pill.st-running{background:#d8f3e6;color:#0c6b47}.pill.err{background:#fde3e3;color:#b42f2f}.pill.warn,.pill.st-paused{background:#fff0c9;color:#8a6200}.pill.st-waiting{background:var(--sky2);color:#21648c}.pill.st-ended{background:#eceaea;color:#555}
.card{background:#fff;border-radius:var(--r);padding:1.1rem 1.2rem;box-shadow:var(--sh);margin-bottom:1rem}
.card-h{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:.6rem}
.empty{color:var(--mut);text-align:center;padding:1.2rem}
.table-wrap{overflow-x:auto}.tbl{width:100%;border-collapse:collapse;font-size:.92rem}
.tbl th{text-align:left;font-size:.78rem;text-transform:uppercase;letter-spacing:.03em;color:var(--mut);padding:.55rem;border-bottom:2px solid var(--line);white-space:nowrap}
.tbl td{padding:.55rem;border-bottom:1px solid var(--line);vertical-align:top}.tbl tr.kicked{opacity:.5}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:#c8cfcc}.dot.on{background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.2)}
.code{font-family:ui-monospace,Consolas,monospace;letter-spacing:.06em;color:var(--em)}.code.big{font-size:1.35rem}
.credit{font-size:.82rem;color:var(--mut);text-align:center;margin-top:1rem}.credit.big{font-size:1.1rem;font-weight:800;color:var(--em)}
.spin{width:42px;height:42px;border-radius:50%;border:4px solid rgba(255,255,255,.35);border-top-color:var(--gold2);animation:sp 0.8s linear infinite;margin:0 auto}
@keyframes sp{to{transform:rotate(360deg)}}
.loading-ov{position:fixed;inset:0;background:rgba(15,40,32,.55);display:grid;place-items:center;z-index:99;color:#fff;text-align:center}
.netbadge{font-size:.8rem;font-weight:800;color:var(--ok);background:#e3f6ed;padding:.2em .7em;border-radius:99px}.netbadge.off{color:#b42f2f;background:#fde3e3}
#toasts{position:fixed;left:50%;top:12px;transform:translateX(-50%);z-index:120;display:flex;flex-direction:column;gap:.4rem;align-items:center;pointer-events:none;width:min(92vw,460px)}
.toast{background:rgba(20,40,34,.92);color:#fff;padding:.6rem 1rem;border-radius:12px;font-weight:700;box-shadow:var(--sh);transition:opacity .4s,transform .4s;text-align:center}
.toast.ok{background:rgba(15,122,90,.95)}.toast.warn{background:rgba(160,108,0,.95)}.toast.info{background:rgba(33,100,140,.95)}.toast.out{opacity:0;transform:translateY(-8px)}

/* ===== autentikasi ===== */
.auth-bg{min-height:100vh;display:grid;place-items:center;padding:1rem;background:radial-gradient(circle at 20% 10%,#bfe6f7 0,transparent 40%),radial-gradient(circle at 90% 90%,#f7e3a6 0,transparent 40%),linear-gradient(160deg,#e6f5ef,#fbf5e6)}
.auth-card{width:min(440px,100%);background:#fff;border-radius:22px;padding:1.6rem;box-shadow:0 20px 60px rgba(15,60,45,.18)}.auth-card.wide{width:min(620px,100%)}
.auth-head{display:flex;gap:1rem;align-items:center;margin-bottom:1rem}.auth-head h1{font-size:1.35rem;margin:0;color:var(--em)}.auth-head p{margin:0;color:var(--mut)}
.checklist{list-style:none;padding:0}.checklist li{padding:.3rem 0}.checklist .ok{color:var(--ok)}.checklist .bad{color:var(--err);font-weight:800}
.demo-box{background:var(--sky2);border-radius:12px;padding:.8rem 1rem;margin-top:1rem;font-size:.92rem}.demo-box ul{margin:.3rem 0;padding-left:1.2rem}

/* ===== dashboard ===== */
.dash{display:flex;min-height:100vh}
.side{width:255px;background:linear-gradient(180deg,#0f7a5a,#0b5e46);color:#fff;position:fixed;inset:0 auto 0 0;display:flex;flex-direction:column;z-index:30;transition:transform .25s}
.brand{display:flex;gap:.7rem;align-items:center;padding:1.1rem 1rem;border-bottom:1px solid rgba(255,255,255,.12)}.brand img{width:44px;height:44px;object-fit:contain;background:#fff;border-radius:12px;padding:3px}
.brand b{display:block;font-size:1.02rem}.brand small{opacity:.8;font-size:.78rem}
.side nav{flex:1;overflow:auto;padding:.6rem}.side nav a{display:flex;gap:.7rem;align-items:center;color:#e8fff6;text-decoration:none;padding:.62rem .8rem;border-radius:12px;font-weight:700;margin-bottom:2px}
.side nav a:hover{background:rgba(255,255,255,.1)}.side nav a.on{background:#fff;color:var(--em)}.side nav a span{width:1.4em;text-align:center}
.side-foot{padding:.8rem 1rem;border-top:1px solid rgba(255,255,255,.12);display:flex;flex-direction:column;gap:.3rem}.side-foot a{color:#e8fff6;text-decoration:none;font-weight:700;font-size:.9rem}.side-foot .credit{color:#bfe9d9;margin-top:.4rem}
.main{flex:1;margin-left:255px;padding:0 1.4rem 1.4rem;min-width:0}
.top{display:flex;align-items:center;gap:1rem;padding:1rem 0;position:sticky;top:0;background:var(--cream);z-index:10}.top h1{font-size:1.3rem;margin:0;flex:1;color:var(--em)}
.top-r{display:flex;gap:.8rem;align-items:center}.who small{color:var(--mut)}
.burger{display:none;font-size:1.5rem;cursor:pointer;padding:.2rem .5rem}.scrim{display:none}
.main-credit{padding:1rem 0}
@media (max-width:900px){.side{transform:translateX(-100%)}#navtog:checked~.side{transform:none}#navtog:checked~.scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:25}
.main{margin-left:0;padding:0 .8rem 1rem}.burger{display:block}.who{display:none}}
.hero-dash{display:flex;align-items:center;justify-content:space-between;gap:1rem;background:linear-gradient(120deg,#0f7a5a,#1f9d74 60%,#3fb68c);color:#fff;border-radius:22px;padding:1.4rem 1.6rem;margin-bottom:1rem;overflow:hidden}
.hero-dash h2{margin:0 0 .3rem}.hero-dash p{opacity:.92}.hero-art{width:220px;max-width:35%;margin:-1rem -.6rem -1.4rem 0}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1rem;margin-bottom:1rem}
.stat{background:#fff;border-radius:var(--r);padding:1rem 1.2rem;box-shadow:var(--sh);border-top:4px solid var(--gold2)}.stat b{font-size:1.8rem;color:var(--em);display:block}.stat span{color:var(--mut);font-size:.9rem}
.steps{padding-left:1.2rem}.steps li{margin:.4rem 0}
.worlds-mini{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}.worlds-mini div{display:flex;gap:.5rem;align-items:center;padding:.5rem;border-radius:12px;background:linear-gradient(120deg,var(--a),var(--b));color:#fff;font-weight:800;font-size:.85rem;text-shadow:0 1px 2px rgba(0,0,0,.3)}
.worlds-mini b{background:rgba(255,255,255,.3);border-radius:8px;width:26px;height:26px;display:grid;place-items:center}
.pack-grid,.room-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:1rem}
.pack{display:block;background:#fff;border-radius:var(--r);padding:1rem 1.2rem;box-shadow:var(--sh);text-decoration:none;color:var(--ink);border-left:5px solid var(--em2);transition:transform .12s}.pack:hover{transform:translateY(-2px)}
.pack h3{margin:.4rem 0 .2rem}.pack-n{margin-top:.5rem}.pack-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.6rem}
.badge-n{background:var(--gold2);color:#3a2a00;border-radius:99px;padding:0 .45em;font-size:.75rem}
.tabs{display:flex;gap:.3rem;flex-wrap:wrap;margin-bottom:1rem;border-bottom:2px solid var(--line)}.tabs a{padding:.55rem .9rem;text-decoration:none;font-weight:800;color:var(--mut);border-radius:10px 10px 0 0}.tabs a.on{color:var(--em);background:#fff;box-shadow:0 -2px 0 var(--em2) inset}
.qlist{display:flex;flex-direction:column;gap:.8rem}.qitem{background:#fff;border-radius:var(--r);padding:1rem 1.1rem;box-shadow:var(--sh);border-left:4px solid var(--em2)}.qitem.draft{border-left-color:var(--gold2);background:#fffdf5}
.qmeta{display:flex;flex-wrap:wrap;gap:.3rem;align-items:center}.qtext{font-weight:700;margin:.5rem 0 .3rem}.qkey{color:var(--ok);font-weight:700;margin:.2rem 0}
.qimg{max-height:160px;border-radius:10px;display:block;margin:.4rem 0}.cerita{background:var(--sky2);padding:.5rem .8rem;border-radius:10px}
.tpl{background:#f6f4ec;padding:.8rem;border-radius:12px;overflow:auto;font-size:.82rem}
.materi{max-height:480px;overflow:auto;background:#fcfbf6;padding:.8rem;border-radius:12px}
.modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.6rem}.mode-card{display:flex!important;flex-direction:column;gap:.2rem;border:2px solid var(--line);border-radius:14px;padding:.7rem .9rem!important;cursor:pointer;margin:0!important}
.mode-card:has(input:checked){border-color:var(--em2);background:var(--em3)}.mode-card input{width:auto;margin:0}.mode-card small{font-weight:600;color:var(--mut)}
.room-card{background:#fff;border-radius:var(--r);padding:1rem 1.2rem;box-shadow:var(--sh);border-top:5px solid var(--sky)}.room-card.st-running{border-top-color:#22c55e}.room-card.st-paused{border-top-color:var(--gold2)}.room-card.st-ended{border-top-color:#bbb}
.room-top{display:flex;justify-content:space-between;align-items:center}
.mon-head{display:grid;grid-template-columns:auto 1fr;gap:1.2rem;align-items:center}.mon-code{background:linear-gradient(160deg,var(--em2),var(--em));color:#fff;border-radius:18px;padding:1rem 1.4rem;text-align:center;max-width:320px}
.mon-code>b{display:block;font-size:2.2rem;letter-spacing:.08em;font-family:ui-monospace,Consolas,monospace}.mon-code .muted{color:#d6f5e9;word-break:break-all}
.mon-live{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}.timer{font-size:1.6rem;font-weight:900;font-family:ui-monospace,Consolas,monospace;color:var(--em)}
.mon-ctrl{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.5rem}
@media(max-width:700px){.mon-head{grid-template-columns:1fr}.mon-code{max-width:none}}
.grid-mon{display:grid;grid-template-columns:380px 1fr;gap:1rem}@media(max-width:1000px){.grid-mon{grid-template-columns:1fr}}
#map{width:100%;max-width:360px;border-radius:12px;display:block;margin:auto}
.group-row{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.6rem}.gchip{border-left:5px solid var(--c);background:#f8f8f4;border-radius:10px;padding:.3rem .7rem;font-size:.85rem}
.chatlog{list-style:none;padding:0;margin:0;font-size:.88rem;max-height:200px;overflow:auto}.chatlog li{padding:.2rem 0;border-bottom:1px dashed var(--line)}
.coop{margin-top:.5rem}.coop-bar{height:12px;border-radius:99px;background:#e9eee9;overflow:hidden}.coop-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold2),var(--em2));transition:width .6s;width:0}
.bar-row{display:grid;grid-template-columns:1fr 120px 42px;gap:.5rem;align-items:center;margin:.4rem 0;font-size:.9rem}.bar-row em{grid-column:1/-1;font-size:.78rem;font-style:normal;margin-top:-.3rem}
.bar{height:10px;background:#eef0ee;border-radius:99px;overflow:hidden}.bar i{display:block;height:100%}.bar i.ok{background:var(--em2)}.bar i.mid{background:var(--gold2)}.bar i.low{background:#e57373}
.kv td{padding:.25rem .8rem .25rem 0}.lic-card.ok{border-top:5px solid var(--em2)}.lic-card.warn{border-top:5px solid var(--gold2)}.lic-card.err{border-top:5px solid var(--err)}.lic-state{font-size:1.5rem;font-weight:900}
.secret{font-family:ui-monospace,Consolas,monospace;font-size:1.2rem;background:#f6f4ec;padding:.5rem .8rem;border-radius:10px;margin:.4rem 0;letter-spacing:.08em;word-break:break-all}
.logo-edit{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}.logo-edit label{flex:1}
.about{text-align:center;max-width:640px;margin:auto}.about .tagline{font-style:italic;color:var(--em)}

/* ===== proyektor ===== */
.proj{background:linear-gradient(160deg,#0b5e46,#0f7a5a 50%,#14806a);color:#fff;min-height:100vh;padding:1.5rem 2rem}
.proj header{display:flex;align-items:center;gap:1.4rem}.proj header img{width:72px;background:#fff;border-radius:16px;padding:4px}.proj header h1{margin:0;font-size:2rem}.proj header p{margin:0;opacity:.85}
.proj-code{margin-left:auto;text-align:center;background:rgba(255,255,255,.12);border-radius:18px;padding:.6rem 1.4rem;font-weight:700}.proj-code b{display:block;font-size:2.6rem;letter-spacing:.08em;color:var(--gold2);font-family:ui-monospace,Consolas,monospace}
.proj-timer{text-align:center}.proj-timer b{display:block;font-size:2.6rem;font-family:ui-monospace,Consolas,monospace}
.proj-main{display:grid;grid-template-columns:2fr 1fr;gap:2rem;margin-top:1.4rem}.proj-main section:only-child{grid-column:1/-1}
.coop.big{max-width:900px;margin:1rem auto 0;text-align:center;font-weight:800}.coop.big .coop-bar{height:22px;background:rgba(255,255,255,.2)}
.board{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem}
.board li{display:grid;grid-template-columns:52px 1fr auto auto;align-items:center;gap:.6rem;background:rgba(255,255,255,.12);border-radius:14px;padding:.55rem 1rem;font-size:1.3rem;border-left:6px solid var(--c,transparent)}
.board li small{opacity:.75;font-size:.85rem;grid-column:2;grid-row:2;margin-top:-.4rem}.board .rk{font-size:1.5rem;text-align:center;grid-row:span 2}.board .sc{font-weight:900;color:var(--gold2);grid-row:span 2;font-size:1.5rem}.board .lvt{font-size:.9rem;opacity:.85;grid-row:span 2}
.board li.r1{background:rgba(245,197,66,.28)}.board.sm li{font-size:1rem;background:#f6f8f6;color:var(--ink)}.board.sm .sc{color:var(--em);font-size:1.1rem}.board.sm li.me{background:#fff6d9;outline:2px solid var(--gold2)}
@media(max-width:900px){.proj-main{grid-template-columns:1fr}.proj header{flex-wrap:wrap}}

/* ===== halaman utama ===== */
.landing{background:var(--cream)}
.l-top{display:flex;justify-content:space-between;align-items:center;padding:.8rem 1.4rem;position:absolute;top:0;left:0;right:0;z-index:5;color:#fff}
.l-brand{display:flex;gap:.6rem;align-items:center;text-decoration:none;color:#fff}.l-brand img{width:44px;height:44px;background:#fff;border-radius:12px;padding:3px}.l-brand small{display:block;opacity:.85;font-size:.75rem}
.l-top nav{display:flex;gap:1rem;align-items:center}.l-top nav a{color:#fff;font-weight:800;text-decoration:none}
.l-hero{min-height:100vh;display:grid;grid-template-columns:1.2fr .8fr;gap:2rem;align-items:center;padding:5.5rem 2rem 2rem;background:radial-gradient(ellipse at 70% 0,#7ec8f0 0,transparent 55%),linear-gradient(170deg,#0f7a5a 0,#1f9d74 55%,#7ec8f0 140%);color:#fff;position:relative;overflow:hidden}
.l-hero:after{content:"";position:absolute;inset:auto 0 -1px 0;height:60px;background:var(--cream);clip-path:ellipse(70% 100% at 50% 100%)}
.l-hero h1{font-size:clamp(2.6rem,7vw,5rem);margin:0;line-height:.95;letter-spacing:.02em;text-shadow:0 4px 0 rgba(0,0,0,.15)}.l-hero h1 span{color:var(--gold2)}
.tag-line{font-size:1.25rem;font-weight:800;color:#fff3c4;margin:.6rem 0}
.l-preview{width:100%;height:340px;display:block;border-radius:24px;margin-top:.6rem;cursor:grab;touch-action:pan-y}
.join-card{background:#fff;color:var(--ink);border-radius:24px;padding:1.5rem;box-shadow:0 30px 70px rgba(0,40,30,.35);position:relative;z-index:2}
.join-card h2{color:var(--em);margin-top:0}.join-card label{display:block;font-weight:800;margin:.6rem 0}.join-card .btn{margin-top:.6rem;width:100%}.join-card .btn.ghost-w{color:var(--em);box-shadow:inset 0 0 0 2px var(--em3);background:#fff}
.err-box{background:#fdeeee;color:#a32a2a;border-radius:10px;padding:.5rem .8rem;margin-top:.5rem;font-weight:700}
.resume{display:block;background:var(--sky2);padding:.6rem .8rem;border-radius:12px;font-weight:700;text-decoration:none;margin-bottom:.5rem}
.l-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;padding:2rem;max-width:1100px;margin:auto}
.l-steps div{background:#fff;border-radius:20px;padding:1.2rem;box-shadow:var(--sh)}.l-steps b{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--gold2);font-size:1.2rem}
.l-worlds,.l-modes{padding:1rem 2rem 2rem;max-width:1200px;margin:auto}.l-worlds h2,.l-modes h2{text-align:center;color:var(--em);font-size:1.8rem}
.world-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem}
.world{position:relative;border-radius:20px;padding:1.1rem 1.2rem 1.2rem;color:#fff;background:linear-gradient(165deg,var(--a) 0,var(--a) 45%,var(--b) 100%);box-shadow:var(--sh);overflow:hidden;min-height:170px;text-shadow:0 1px 3px rgba(0,0,0,.35)}
.world:after{content:"";position:absolute;right:-30px;bottom:-30px;width:120px;height:120px;border-radius:50%;background:var(--c);opacity:.35}
.world .wn{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.3);font-weight:900;font-size:1.1rem}
.world h3{margin:.5rem 0 .2rem}.world p{margin:0;font-size:.9rem}.world small{opacity:.92;display:block;margin-top:.3rem}
.world.locked{filter:grayscale(.85) brightness(.9)}.world.cur{outline:4px solid var(--gold2)}.wtag{display:inline-block;background:var(--gold2);color:#3a2a00;border-radius:99px;padding:.15em .7em;margin-top:.5rem;text-shadow:none;font-size:.85rem}
.wprog{height:8px;border-radius:99px;background:rgba(255,255,255,.35);margin-top:.5rem;overflow:hidden;position:relative;z-index:1}.wprog i{display:block;height:100%;background:var(--gold2)}
.world .btn{margin-top:.5rem;position:relative;z-index:1}
.mode-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}.mode-grid div{background:#fff;border-radius:20px;padding:1.2rem;box-shadow:var(--sh);border-bottom:5px solid var(--gold2)}.mode-grid span{font-size:2rem}
.l-foot{text-align:center;padding:2rem 1rem;color:var(--mut)}
@media(max-width:860px){.l-hero{grid-template-columns:1fr;padding:5rem 1rem 3rem}.l-preview{height:240px}.l-top nav a:not(.btn){display:none}}

/* ===== markas (hub) ===== */
.hub{background:linear-gradient(180deg,#e6f5ef 0,#fbf5e6 280px)}
.hub-top{display:flex;gap:.8rem;align-items:center;padding:.7rem 1rem;background:var(--em);color:#fff;position:sticky;top:0;z-index:5}.hub-top div{flex:1;min-width:0}.hub-top small{display:block;opacity:.85;font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hub-back{color:#fff;text-decoration:none;font-size:1.4rem;font-weight:900;padding:0 .4rem}
.hub-hero{display:grid;grid-template-columns:1fr 1fr;gap:1rem;max-width:1100px;margin:1rem auto;padding:0 1rem;align-items:center}
.hub-preview{width:100%;height:320px;border-radius:22px;background:#dff1fb;cursor:grab;touch-action:pan-y;display:block}
.hub-me h2{margin:0;color:var(--em);font-size:1.6rem}.gelar{font-weight:800;color:var(--gold);margin:.2rem 0 .5rem}
.xpbar{height:12px;border-radius:99px;background:#e2ebe6;overflow:hidden}.xpbar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold2),var(--em2))}
.hub-wallet{display:flex;gap:1rem;margin:.8rem 0;font-size:1.1rem}.hub-wallet span{background:#fff;padding:.4rem .8rem;border-radius:12px;box-shadow:var(--sh)}
.hub-tabs{display:flex;gap:.4rem;overflow-x:auto;max-width:1100px;margin:0 auto;padding:.2rem 1rem .6rem;scrollbar-width:none}
.hub-tabs button{flex:none;border:0;background:#fff;font:inherit;font-weight:800;padding:.55rem .9rem;border-radius:12px;box-shadow:var(--sh);cursor:pointer;color:var(--ink)}.hub-tabs button.on{background:var(--em);color:#fff}
.hub-main{max-width:1100px;margin:0 auto;padding:0 1rem 1rem}
@media(max-width:760px){.hub-hero{grid-template-columns:1fr}.hub-preview{height:250px}}
.seg{display:inline-flex;background:#eef3f0;border-radius:12px;padding:3px;margin:.3rem .3rem .3rem 0}.seg button{border:0;background:none;font:inherit;font-weight:800;padding:.45rem .9rem;border-radius:10px;cursor:pointer}.seg button.on{background:#fff;box-shadow:var(--sh);color:var(--em)}
.sws{display:flex;flex-wrap:wrap;gap:.45rem}.sw{width:40px;height:40px;border-radius:50%;border:3px solid #fff;background:var(--c);box-shadow:0 0 0 1.5px var(--line);cursor:pointer;font-size:.8rem;display:grid;place-items:center}
.sw.on{box-shadow:0 0 0 3px var(--em2)}.sw.lock{filter:saturate(.6) brightness(.9)}
.opts{display:flex;flex-wrap:wrap;gap:.45rem}.opt{border:2px solid var(--line);background:#fff;border-radius:12px;padding:.45rem .8rem;font:inherit;font-weight:700;cursor:pointer}.opt.on{border-color:var(--em2);background:var(--em3)}.opt.lock{color:var(--mut)}
.avform h4{margin:.9rem 0 .4rem}
.missions{display:flex;flex-direction:column;gap:.6rem}.mission{display:grid;grid-template-columns:44px 1fr auto;gap:.8rem;align-items:center;background:#fff;border-radius:16px;padding:.8rem 1rem;box-shadow:var(--sh)}
.mission span{font-size:1.6rem}.mission em{font-style:normal;font-weight:900;color:var(--em)}.mission.done{background:#effaf4}.mbar{height:8px;background:#eef0ee;border-radius:99px;overflow:hidden;margin-top:.3rem}.mbar i{display:block;height:100%;background:var(--em2)}
.invs{display:flex;flex-wrap:wrap;gap:.4rem}.inv{background:#f6f8f6;border-radius:10px;padding:.3rem .7rem;font-weight:700;display:inline-flex;gap:.4rem;align-items:center}.inv .dot{width:14px;height:14px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.5rem;max-height:420px;overflow:auto}.hcard{background:linear-gradient(160deg,#fff8e1,#fbf0cf);border-radius:12px;padding:.6rem;font-size:.85rem;border:1.5px solid #f1dc9c}.hcard.lock{background:#f3f3f0;border-color:#e6e6e0;color:var(--mut)}.hcard p{margin:.2rem 0 0}
.ladder{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.5rem}.ladder div{background:#f3f3f0;border-radius:12px;padding:.6rem;color:var(--mut)}.ladder div.on{background:var(--em3);color:var(--em)}.ladder div.cur{outline:3px solid var(--gold2)}.ladder small{display:block}
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.6rem}.badge{text-align:center;background:#f3f3f0;border-radius:14px;padding:.8rem .5rem;filter:grayscale(1);opacity:.6}.badge.on{filter:none;opacity:1;background:linear-gradient(160deg,#fff8e1,#e6f5ef)}.badge span{font-size:2rem;display:block}.badge small{display:block;color:var(--mut);font-size:.78rem}
.nogl{padding:2rem;text-align:center;background:#dff1fb;border-radius:20px}

/* ===== permainan ===== */
.game{margin:0;overflow:hidden;background:#000;touch-action:none;user-select:none;-webkit-user-select:none;position:fixed;inset:0}
#c{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;display:block;outline:0}
#labels{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.nm{position:absolute;left:0;top:0;font-size:12px;font-weight:800;color:#fff;background:rgba(10,40,30,.6);padding:1px 7px;border-radius:99px;white-space:nowrap;border-bottom:3px solid var(--g,#fff)}.nm.me{background:rgba(15,122,90,.85)}
.nm .bub{position:absolute;bottom:130%;left:50%;transform:translateX(-50%);background:#fff;color:var(--ink);padding:4px 10px;border-radius:12px;font-size:13px;box-shadow:0 3px 10px rgba(0,0,0,.25)}
.nm .bub:after{content:"";position:absolute;top:100%;left:50%;margin-left:-6px;border:6px solid transparent;border-top-color:#fff}
#hud{position:fixed;inset:0;pointer-events:none;color:#fff;font-weight:800;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
#hud button{pointer-events:auto}
.h-tl{position:absolute;left:10px;top:10px;background:rgba(10,40,30,.55);backdrop-filter:blur(6px);border-radius:16px;padding:.45rem .8rem}.h-me{display:flex;gap:.6rem;align-items:center}.h-me .lost{opacity:.3}#h-lives{color:#ff6b6b;letter-spacing:1px}
.h-stats{display:flex;gap:.8rem;margin-top:.15rem;font-size:.95rem}
.h-tc{position:absolute;left:50%;top:10px;transform:translateX(-50%);text-align:center;background:rgba(10,40,30,.45);backdrop-filter:blur(6px);border-radius:16px;padding:.35rem 1rem;max-width:46vw}.h-tc b{display:block;font-size:.92rem}.h-tc span{display:block;font-size:.78rem;opacity:.9}
.h-timer{font-family:ui-monospace,Consolas,monospace;font-size:1rem!important;color:#fff3b0}.h-timer.low{color:#ff8a8a!important}
.h-tc .coop{min-width:200px}.h-tc .coop-bar{background:rgba(255,255,255,.25)}
.h-tr{position:absolute;right:10px;top:10px;display:flex;gap:.4rem}.h-tr button{width:44px;height:44px;border-radius:14px;border:0;background:rgba(10,40,30,.55);color:#fff;font-size:1.2rem;cursor:pointer;backdrop-filter:blur(6px)}
.h-net{position:absolute;left:10px;bottom:10px;font-size:.75rem;background:rgba(10,40,30,.5);padding:.2rem .6rem;border-radius:99px;color:#a7f3c9}.h-net.off{color:#ffb4b4;background:rgba(120,20,20,.6)}
.h-rank{position:absolute;right:10px;top:62px;background:rgba(245,197,66,.9);color:#3a2a00;border-radius:12px;padding:.25rem .7rem;font-size:.85rem}
.h-obj{position:absolute;left:10px;top:84px;font-size:.78rem;background:rgba(10,40,30,.45);padding:.25rem .7rem;border-radius:10px}
.stick{position:absolute;left:30px;bottom:50px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.12);border:2px solid rgba(255,255,255,.35);display:none}.stick i{position:absolute;left:35px;top:35px;width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,.75);box-shadow:0 3px 10px rgba(0,0,0,.25)}
.stick.on{display:block}.touch .stick{display:block;opacity:.6}.touch .stick.on{opacity:1}
.b-jump{position:absolute;right:28px;bottom:48px;width:92px;height:92px;border-radius:50%;border:0;background:radial-gradient(circle at 35% 30%,#ffe08a,#d4a62a);color:#3a2a00;font-size:2rem;font-weight:900;box-shadow:0 6px 0 #9c7a12,0 10px 24px rgba(0,0,0,.3);display:none;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.b-jump small{font-size:.7rem}.touch .b-jump{display:flex}.b-jump:active{transform:translateY(3px);box-shadow:0 3px 0 #9c7a12}
.chatlog-g{position:absolute;left:10px;bottom:36px;display:flex;flex-direction:column;gap:.25rem;max-width:60vw}.chatlog-g div{background:rgba(10,40,30,.55);padding:.2rem .6rem;border-radius:10px;font-size:.82rem;font-weight:600;transition:opacity .6s}.chatlog-g div.out{opacity:0}
.touch .chatlog-g{bottom:180px}
.boot{position:fixed;inset:0;background:linear-gradient(170deg,#0f7a5a,#1f9d74);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1rem;z-index:60}.boot[hidden]{display:none}
#overlay.banner{position:fixed;left:50%;bottom:22%;transform:translateX(-50%);background:rgba(10,40,30,.75);color:#fff;padding:.7rem 1.2rem;border-radius:16px;text-align:center;pointer-events:none;z-index:20}#overlay.banner span{display:block;font-size:.85rem;opacity:.85}
#overlay.full{position:fixed;inset:0;background:rgba(5,30,22,.7);display:grid;place-items:center;color:#fff;text-align:center;z-index:40;padding:1rem}
.endcard{background:#fff;color:var(--ink);border-radius:22px;padding:1.6rem;max-width:420px}
.quiz,.panel{position:fixed;inset:0;background:rgba(5,30,22,.55);display:grid;place-items:center;z-index:50;padding:12px;overflow:auto}
.quiz[hidden],.panel[hidden],#overlay[hidden]{display:none}
.qcard,.pcard{background:#fff;color:var(--ink);border-radius:22px;padding:1.2rem 1.3rem;width:min(620px,100%);max-height:calc(100dvh - 24px);overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.35);animation:pop .25s ease-out;position:relative}
@keyframes pop{from{transform:scale(.92);opacity:0}}
.qhead{display:flex;gap:.3rem;flex-wrap:wrap}.qtext{font-size:1.15rem;margin:.7rem 0}.qstory{background:var(--sky2);border-radius:12px;padding:.6rem .8rem;margin-top:.6rem}
.qcard .qimg{max-height:30vh;margin:.6rem auto}
.qopts{display:grid;gap:.5rem}.qopts.two{grid-template-columns:1fr 1fr}
.qopt{display:flex;gap:.7rem;align-items:center;text-align:left;border:2px solid var(--line);background:#fff;border-radius:14px;padding:.75rem .9rem;font:inherit;font-weight:700;cursor:pointer;min-height:52px}.qopt:hover{border-color:var(--em2);background:var(--em3)}
.qopt b{flex:none;width:32px;height:32px;border-radius:10px;background:var(--em3);color:var(--em);display:grid;place-items:center}
.qin{font-size:1.15rem;padding:.8rem}.qact{display:flex;gap:.5rem;justify-content:flex-end;margin-top:.8rem;flex-wrap:wrap}.qhint{background:#fff7dd;border-radius:10px;padding:.5rem .8rem}
.slots{display:flex;gap:.35rem;flex-wrap:wrap;justify-content:center;margin:.6rem 0}.slot{width:40px;height:46px;border-bottom:3px solid var(--em2);display:grid;place-items:center;font-size:1.4rem;font-weight:900;color:var(--em)}
.tiles{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:center}.tile{min-width:46px;height:48px;border-radius:12px;border:0;background:linear-gradient(180deg,var(--gold2),var(--gold));font:inherit;font-weight:900;font-size:1.2rem;box-shadow:0 3px 0 #a17c14;cursor:pointer;padding:0 .7rem}.tile:disabled{opacity:.3}
.tile.w{font-size:.95rem;height:auto;min-height:44px;padding:.4rem .8rem}
.match{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}.match div{display:flex;flex-direction:column;gap:.4rem}.mk{border:2px solid var(--line);background:#fff;border-radius:12px;padding:.6rem;font:inherit;font-weight:700;cursor:pointer;min-height:48px}.mk.sel{border-color:var(--gold);box-shadow:0 0 0 3px rgba(212,166,42,.3)}
.ord{padding-left:1.6rem;margin:.4rem 0;min-height:30px}.ord li{background:var(--em3);border-radius:10px;padding:.45rem .7rem;margin:.3rem 0;font-weight:700;cursor:pointer}
.res{text-align:center}.res.ok h2{color:var(--ok)}.res.no h2{color:#b46a00}.pts{font-weight:900;color:var(--gold);font-size:1.1rem}.bonus{background:#fff4d6;border-radius:10px;padding:.4rem .7rem;font-weight:800}
.kunci{background:var(--em3);padding:.4rem .7rem;border-radius:10px}.bahas{text-align:left;background:#f7f9fb;border-radius:12px;padding:.6rem .9rem;margin-top:.5rem}.bahas p{margin:.3rem 0 0}
.res .qact{justify-content:center}
.pclose{position:absolute;right:10px;top:10px;width:36px;height:36px;border-radius:50%;border:0;background:#f1f3f1;font-size:1rem;cursor:pointer}
.chatgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.4rem}.chatgrid button{border:2px solid var(--line);background:#fff;border-radius:12px;padding:.6rem;font:inherit;font-weight:700;cursor:pointer}.chatgrid button:hover{background:var(--em3)}
.menu-list{display:flex;flex-direction:column;gap:.4rem}.menu-list a,.menu-list button{display:block;text-align:left;border:0;background:#f6f8f6;border-radius:12px;padding:.8rem 1rem;font:inherit;font-weight:800;color:var(--ink);text-decoration:none;cursor:pointer}
.help li{margin:.4rem 0}
.lvgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:.5rem}.lv{border:0;border-radius:14px;padding:.7rem;background:var(--em3);font:inherit;cursor:pointer}.lv b{display:block;font-size:1.4rem;color:var(--em)}.lv small{color:var(--gold)}.lv.cur{outline:3px solid var(--gold2)}.lv.lock{background:#f1f1ee;cursor:not-allowed}
.done{text-align:center}.stars{font-size:3.4rem;letter-spacing:.2rem}.st{color:#ddd;display:inline-block}.st.on{color:var(--gold2);animation:starin .5s both;text-shadow:0 3px 0 #b8901a}
@keyframes starin{from{transform:scale(0) rotate(-90deg)}}
.done-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin:.6rem 0}.done-grid div{background:#f6f8f6;border-radius:12px;padding:.6rem}.done-grid b{display:block;font-size:1.3rem;color:var(--em)}
.hikmah{position:fixed;left:50%;bottom:16%;transform:translateX(-50%);z-index:45;width:min(420px,90vw);background:linear-gradient(160deg,#fff8e1,#f6e2a6);color:#4a3600;border-radius:18px;padding:1rem 1.2rem;box-shadow:0 14px 40px rgba(0,0,0,.35);border:2px solid #e8c766;animation:pop .3s;transition:opacity .5s}
.hikmah.out{opacity:0}.hikmah b{display:block;font-size:1.1rem}.hikmah small{color:#7a5a00}.hikmah p{margin:.3rem 0 0;font-weight:700}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:70;overflow:hidden}.confetti i{position:absolute;top:-20px;width:10px;height:16px;border-radius:3px;animation:fall 2.8s ease-in forwards}
@keyframes fall{to{top:110%;transform:rotate(720deg) translateX(60px)}}
.g-credit{position:fixed;right:8px;bottom:4px;font-size:10px;color:rgba(255,255,255,.75);pointer-events:none;text-shadow:0 1px 2px rgba(0,0,0,.6)}
@media(max-width:640px){.h-tc{top:62px;max-width:94vw;width:max-content;padding:.2rem .8rem;display:flex;gap:.5rem;align-items:center;white-space:nowrap}.h-tc b{font-size:.78rem;overflow:hidden;text-overflow:ellipsis;max-width:62vw}.h-tc span#h-sub{display:none}.h-tc .coop{position:absolute;top:110%;left:0;right:0;min-width:0}
.h-obj{top:96px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:.7rem}.h-rank{top:auto;bottom:34px;right:auto;left:50%;transform:translateX(-50%);font-size:.75rem;white-space:nowrap}
.h-net{left:50%;transform:translateX(-50%);bottom:8px;font-size:.68rem;white-space:nowrap}.touch .chatlog-g,.chatlog-g{bottom:auto;top:126px;max-width:80vw}
.h-tl{padding:.35rem .6rem}.h-stats{font-size:.85rem;gap:.5rem}.h-tr{gap:.3rem}.h-tr button{width:40px;height:40px}.touch .stick{bottom:70px}.b-jump{bottom:70px}}
@media(max-height:480px){.b-jump{width:76px;height:76px;bottom:24px}.stick{bottom:24px}}