/* Susun atur: bilik operasi (peta + panel misi) dan lapisan permainan 3D skrin penuh. Satu rupa gelap, sengaja. */
:root {
  --bg: #0b100b;
  --bg2: #121a11;
  --bg3: #1a2418;
  --panel: rgba(11, 16, 11, 0.86);
  --line: rgba(200, 178, 115, 0.28);
  --line2: rgba(200, 178, 115, 0.55);
  --ink: #ebeddc;
  --muted: #a0aa90;
  --olive: #6b8f3f;
  --olive2: #84a853;
  --khaki: #c8b273;
  --amber: #f4ab3a;
  --danger: #e0584d;
  --ok: #7cc864;
  --sea: #0c1618;
  --land: #34422a;
  --land-hi: #4b6137;
  --font-display: "Saira Stencil One", "Impact", "Arial Black", sans-serif;
  --font-body: "Barlow", "Segoe UI", system-ui, sans-serif;
  --font-util: "Barlow Condensed", "Arial Narrow", "Segoe UI", sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.45; }
body.ingame { overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.util { font-family: var(--font-util); letter-spacing: .06em; text-transform: uppercase; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }

/* ---------- Bar atas ---------- */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: rgba(11,16,11,.95); border-bottom: 1px solid var(--line); }
.top-in { max-width: 1180px; margin: 0 auto; padding: 8px 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.brand { font-family: var(--font-display); font-size: 22px; color: var(--khaki); letter-spacing: .03em; margin-right: auto; white-space: nowrap; }
.brand small { display: block; font-family: var(--font-util); font-size: 11px; color: var(--muted); letter-spacing: .14em; text-transform: uppercase; margin-top: -2px; }
.meb { display: flex; align-items: center; gap: 10px; background: var(--bg2); border: 1px solid var(--line); padding: 4px 12px 4px 6px; cursor: pointer; min-width: 0; }
.meb:hover { border-color: var(--line2); }
.meb svg { flex: none; }
.me-t { min-width: 0; line-height: 1.15; text-align: left; }
.me-n { font-family: var(--font-util); font-weight: 700; font-size: 17px; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 170px; }
.me-r { margin-left: 6px; font-size: 13px; color: var(--muted); font-family: var(--font-util); letter-spacing: .05em; text-transform: uppercase; }
.xpbar { height: 5px; background: rgba(255,255,255,.1); margin-top: 3px; width: 130px; max-width: 100%; }
.xpbar i { display: block; height: 100%; background: var(--amber); width: 0; }
.tabs { display: flex; gap: 2px; width: 100%; overflow-x: auto; }
.tab { appearance: none; background: transparent; border: 0; border-bottom: 3px solid transparent; font-family: var(--font-util); font-weight: 600; font-size: 17px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 8px 14px; cursor: pointer; white-space: nowrap; }
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--amber); border-bottom-color: var(--amber); }
@media (min-width: 900px) { .tabs { width: auto; } }

/* ---------- Susun atur halaman ---------- */
.wrap { max-width: 1180px; margin: 0 auto; padding-inline: 16px; padding-block: 18px 110px; }
h2.sec { font-family: var(--font-display); font-weight: 400; font-size: 26px; color: var(--khaki); margin: 0 0 4px; text-wrap: balance; }
.lead { color: var(--muted); max-width: 70ch; margin: 0 0 16px; }
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
body.vmap .wrap, body.vmap .top-in { max-width: 1600px; }
.side { display: grid; gap: 12px; align-content: start; position: sticky; top: calc(116px + env(safe-area-inset-top, 0px)); max-height: calc(100vh - 140px); overflow-y: auto; }
.side .homebar { grid-template-columns: minmax(0, 1fr); margin-bottom: 0; }
@media (max-width: 1000px) { .side { position: static; max-height: none; overflow: visible; margin-top: 18px; } .side .homebar { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } }
@media (max-width: 1000px) { .layout { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Peta ---------- */
.maps { display: grid; grid-template-columns: minmax(0, 232fr) minmax(0, 385fr); gap: 12px; align-items: stretch; }
@media (max-width: 700px) { .maps { grid-template-columns: minmax(0, 1fr); } }
.mapbox { background: radial-gradient(ellipse at 28% 22%, rgba(80,170,210,.34), rgba(80,170,210,0) 58%), radial-gradient(ellipse at 80% 90%, rgba(5,20,34,.7), rgba(5,20,34,0) 60%), linear-gradient(160deg, #123344, #0a1a26 70%); border: 1px solid var(--line); position: relative; padding: 8px; }
.st { fill: #3e5632; stroke: rgba(226,242,140,.62); stroke-width: .55; stroke-linejoin: round; transition: fill .2s; }
.st.part { fill: #63853f; }
.st.cap { fill: #8fb04f; }
.st.gold { fill: #dff47c; stroke: #fff2a0; stroke-width: 1.1; filter: drop-shadow(0 0 3px rgba(217,242,122,.95)); }
.mapbox .x3d use { pointer-events: none; }
.mapbox .pin { filter: drop-shadow(0 2px 1.6px rgba(0,0,0,.65)); }
.mapbox .sealbl { fill: rgba(190,225,240,.4); }
.mapbox h3 { margin: 0 0 4px; font-family: var(--font-util); font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--khaki); font-weight: 600; }
.mapbox svg { width: 100%; height: auto; display: block; max-height: 780px; }

/* ---------- Pasukan tetap (kempen berurutan) ---------- */
.pin.lock polygon { fill: #3a3f38 !important; opacity: .55; }
.pin.lock text { fill: #9aa08f; }
.pin.nxt polygon { stroke: #fff; stroke-width: 2; animation: nxtp 1.4s ease-in-out infinite; }
@keyframes nxtp { 50% { stroke: #f4ab3a; stroke-width: 3; } }
.mrow.lock { opacity: .5; }
.sqhd { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.sqcode { font-family: var(--font-util); font-weight: 700; font-size: 30px; letter-spacing: .18em; color: var(--amber); }
.sqlad { display: grid; gap: 6px; margin-top: 8px; }
.sqrow { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; background: var(--bg2); border: 1px solid var(--line); padding: 7px 12px; }
.sqrow.done { border-color: #4f7a3a; }
.sqrow.cur { border-color: var(--amber); background: #1d2615; }
.sqrow.lk { opacity: .5; }
.sqrow .no { font-family: var(--font-display); font-size: 20px; color: var(--khaki); text-align: center; }
@media (prefers-reduced-motion: reduce) { .pin.nxt polygon { animation: none; } }

/* ---------- Dompet syiling (v17.11) ---------- */
.wallet { position: relative; display: flex; align-items: center; gap: 8px; padding: 3px 16px 3px 6px; cursor: pointer; color: #ffd75e; background: linear-gradient(180deg, #3a2d0a, #1a1407); border: 1px solid #b88a22; box-shadow: 0 0 0 1px rgba(255,215,94,.12) inset, 0 0 14px rgba(255,190,50,.18); font: 800 22px var(--font-util); letter-spacing: .03em; }
.wallet:hover { border-color: #ffd75e; box-shadow: 0 0 0 1px rgba(255,215,94,.3) inset, 0 0 20px rgba(255,190,50,.4); }
.wc { position: relative; display: inline-block; width: 34px; height: 34px; flex: none; }
.wc svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.wc.spin svg { animation: wcflip .9s ease-in-out; }
@keyframes wcflip { 0% { transform: rotateY(0) scale(1); } 40% { transform: rotateY(360deg) scale(1.35); filter: drop-shadow(0 0 10px #ffd75e); } 100% { transform: rotateY(720deg) scale(1); } }
.walnum { font-variant-numeric: tabular-nums; text-shadow: 0 0 10px rgba(255,200,60,.45); }
.walnum.pulse { color: #fff3b0; text-shadow: 0 0 14px #ffc83c, 0 0 26px #ffc83c; }
.walpop { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); pointer-events: none; width: max-content; z-index: 5; }
.wp { position: absolute; left: 50%; top: 4px; transform: translateX(-50%); font: 800 20px var(--font-util); white-space: nowrap; animation: wpup 1.4s ease-out forwards; }
.wp.up { color: #ffe27a; text-shadow: 0 0 8px rgba(255,200,60,.9), 0 2px 3px #000; }
.wp.dn { color: #ff8a7a; text-shadow: 0 2px 3px #000; }
@keyframes wpup { 0% { opacity: 0; transform: translate(-50%, -10px) scale(.6); } 18% { opacity: 1; transform: translate(-50%, 6px) scale(1.25); } 100% { opacity: 0; transform: translate(-50%, 34px) scale(1); } }
.wsp { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: #ffe27a; box-shadow: 0 0 6px #ffc83c; animation: wsp .85s ease-out forwards; }
@keyframes wsp { to { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }
.walhero { position: relative; overflow: hidden; display: flex; align-items: center; gap: 18px; padding: 16px 22px; margin-bottom: 14px; background: radial-gradient(ellipse at 12% 40%, rgba(255,200,60,.28), rgba(255,200,60,0) 55%), linear-gradient(135deg, #2c2208, #14100a 70%); border: 1px solid #b88a22; box-shadow: 0 0 24px rgba(255,190,50,.15) inset; }
.walhero::after { content: ""; position: absolute; top: 0; bottom: 0; width: 80px; left: -120px; background: linear-gradient(90deg, transparent, rgba(255,240,170,.18), transparent); transform: skewX(-20deg); animation: walshine 5s ease-in-out infinite; }
@keyframes walshine { 0%, 60% { left: -120px; } 100% { left: 110%; } }
.walhero .wc { width: 74px; height: 74px; }
.walhero .wc svg { animation: wcbob 3.2s ease-in-out infinite; }
@keyframes wcbob { 50% { transform: translateY(-4px) rotateY(18deg); } }
.walhero .wc.spin svg { animation: wcflip .9s ease-in-out; }
.walbox { min-width: 0; position: relative; }
.walbox .wl { font: 700 13px var(--font-util); letter-spacing: .26em; color: #d8b45a; }
.walbox .walnum { display: block; font: 800 clamp(34px, 6vw, 52px)/1 var(--font-util); color: #ffd75e; }
.walbox .walpop { left: 215px; top: 12px; }
.walmsg { margin-top: 6px; font-size: 14px; color: #cdbf93; }
@media (prefers-reduced-motion: reduce) { .wc.spin svg, .walhero .wc svg, .walhero::after, .wp, .wsp { animation: none !important; } .wp { opacity: 1; } .wsp { display: none; } }
@media (max-width: 560px) { .wallet { font-size: 19px; } .walhero { padding: 12px 14px; gap: 12px; } .walhero .wc { width: 56px; height: 56px; } }
/* ---------- Syiling: kesan tambah ---------- */
.coinline { position: relative; display: inline-block; }
#coinNum { font-style: normal; color: var(--amber); font-weight: 700; font-size: 1.3em; display: inline-block; transform-origin: center; }
#coinNum.bump { animation: cbump .55s ease-out; }
@keyframes cbump { 0% { transform: scale(1); text-shadow: none; } 25% { transform: scale(1.7); color: #ffe27a; text-shadow: 0 0 10px #ffc83c, 0 0 18px #ffc83c; } 100% { transform: scale(1); text-shadow: none; } }
#coinPop { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); width: max-content; pointer-events: none; display: flex; flex-direction: column; align-items: center; }
.tc .cpop { font-size: 16px; font-weight: 700; color: #ffd75e; text-transform: none; text-shadow: 0 0 6px rgba(255,200,60,.85), 0 1px 2px #000; white-space: nowrap; animation: cpop 1.25s ease-out forwards; }
@keyframes cpop { 0% { opacity: 0; transform: translateY(-8px) scale(.7); } 15% { opacity: 1; transform: translateY(0) scale(1.2); } 100% { opacity: 0; transform: translateY(24px) scale(1); } }
@media (prefers-reduced-motion: reduce) { #coinNum.bump { animation: none; color: #ffe27a; } .tc .cpop { animation: cpopr 1.25s linear forwards; } @keyframes cpopr { 0%, 80% { opacity: 1; } 100% { opacity: 0; } } }
.shopcard.own { border-color: #4f7a3a; }

/* ---------- Latihan Khas ---------- */
.pin.khas polygon { stroke: #fff3c4; stroke-width: 1.6; }
.pin.khas text { font-size: 6.6px; }
.pin.rahsia polygon { stroke: #fff; stroke-width: 2; filter: drop-shadow(0 0 5px #f0c040); animation: rhsp 1.6s ease-in-out infinite; }
.pin.rahsia text { fill: #1a1200; font-weight: 800; }
@keyframes rhsp { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.mrow.rahsia { border-color: #f0c040; box-shadow: 0 0 0 1px #f0c040 inset; }
.rhs-hint { margin-top: 8px; font-size: 14px; letter-spacing: .04em; }
@media (prefers-reduced-motion: reduce) { .pin.rahsia polygon { animation: none; } }
.mrow.khas .code { background: #d9573a; color: #fff; font-size: 13px; }
.cvrow { display: grid; grid-template-columns: minmax(110px, 150px) 1fr auto; gap: 10px; align-items: center; margin: 8px 0; }
.cvbar { height: 12px; background: #1b2415; border: 1px solid var(--line); position: relative; }
.cvbar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #6fcf6f, #d9f27a); }
.cvbar.done i { background: #ffd75e; }
@media (max-width: 560px) { .cvrow { grid-template-columns: 1fr; } }
.pin.s3 polygon { stroke: #ffd75e; stroke-width: 2; filter: drop-shadow(0 0 2px rgba(255,215,94,.9)); }
.legend .lg-st i { clip-path: none; border: 1px solid #0b100b; }
.st.sel { stroke: var(--amber); stroke-width: 1.3; }
.sealbl { font-family: var(--font-util); font-size: 6px; letter-spacing: .3em; fill: rgba(200,178,115,.35); text-transform: uppercase; }
.stlbl { font-family: var(--font-util); font-weight: 600; font-size: 6.4px; letter-spacing: .08em; fill: #e8e3c4; paint-order: stroke; stroke: #0b100b; stroke-width: 1.6px; stroke-linejoin: round; text-transform: uppercase; pointer-events: none; }
.pin { cursor: pointer; }
.pin polygon { stroke: #0b100b; stroke-width: 1.2; transition: transform .15s; transform-box: fill-box; transform-origin: center; }
.pin:hover polygon, .pin:focus-visible polygon { transform: scale(1.18); }
.pin.sel polygon { stroke: #fff; stroke-width: 1.8; }
.pin text { font-family: var(--font-util); font-weight: 700; font-size: 8px; fill: #0b100b; text-anchor: middle; pointer-events: none; }
.pin .stars { font-size: 5.6px; fill: var(--amber); paint-order: stroke; stroke: #0b100b; stroke-width: 1.4px; }
.pin:focus-visible { outline: none; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 0; font-family: var(--font-util); font-size: 14px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 12px; height: 12px; display: inline-block; clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); }

/* ---------- Panel misi ---------- */
.panel { background: var(--bg2); border: 1px solid var(--line); padding: 16px; display: grid; gap: 10px; }
.panel h3 { font-family: var(--font-display); font-weight: 400; font-size: 24px; margin: 0; color: var(--ink); text-wrap: balance; line-height: 1.1; }
.tagline { font-family: var(--font-util); font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--amber); }
.panel ul { margin: 0; padding-left: 18px; display: grid; gap: 5px; font-size: 15px; }
.panel .std { font-size: 13.5px; color: var(--muted); border-left: 3px solid var(--line2); padding-left: 10px; }
.starrow { font-size: 20px; letter-spacing: 3px; color: var(--amber); }
.starrow .off { color: rgba(255,255,255,.18); }
.btn { appearance: none; font-family: var(--font-util); font-weight: 700; font-size: 19px; letter-spacing: .08em; text-transform: uppercase; background: var(--olive); color: #0b100b; border: 0; padding: 11px 20px; cursor: pointer; }
.btn:hover { background: var(--olive2); }
.btn.alt { background: transparent; color: var(--khaki); border: 1px solid var(--khaki); }
.btn.alt:hover { background: rgba(200,178,115,.1); }
.btn.sm { font-size: 15px; padding: 6px 12px; }
.row.modegrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.btn.mode { --c: #8fb24a; display: flex; align-items: center; gap: 10px; text-align: left; padding: 8px 10px 8px 8px; border-radius: 11px; font-size: 16px; line-height: 1.05; letter-spacing: .06em; color: #f4eed8; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 40%, #0b100b), color-mix(in srgb, var(--c) 14%, #0b100b)); border: 1px solid color-mix(in srgb, var(--c) 70%, transparent); border-bottom: 4px solid color-mix(in srgb, var(--c) 55%, #000); box-shadow: 0 4px 10px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.18); transition: transform .15s, box-shadow .15s, filter .15s; min-height: 54px; }
.btn.mode:hover { transform: translateY(-3px); filter: brightness(1.18); box-shadow: 0 9px 18px rgba(0,0,0,.5), 0 0 16px color-mix(in srgb, var(--c) 50%, transparent), inset 0 1px 0 rgba(255,255,255,.25); background: linear-gradient(160deg, color-mix(in srgb, var(--c) 48%, #0b100b), color-mix(in srgb, var(--c) 18%, #0b100b)); }
.btn.mode:active { transform: translateY(1px); border-bottom-width: 2px; margin-bottom: 2px; }
.btn.mode:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.btn.mode .mi { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--c) 55%, #fff), var(--c)); box-shadow: inset 0 -3px 0 rgba(0,0,0,.28), inset 0 2px 0 rgba(255,255,255,.4), 0 3px 7px rgba(0,0,0,.5); }
.btn.mode .mi svg { width: 28px; height: 28px; filter: drop-shadow(0 1px 0 rgba(255,255,255,.35)); }
.btn.mode:hover .mi { animation: miBob .7s ease-in-out infinite alternate; }
@keyframes miBob { to { transform: translateY(-3px) rotate(-7deg) scale(1.1); } }
.modegrid .m-tm, .modegrid .m-sl, .modegrid .m-mp { grid-column: 1 / -1; }
.modegrid .m-tm { font-size: 19px; min-height: 62px; }
@media (prefers-reduced-motion: reduce) { .btn.mode, .btn.mode:hover .mi { transition: none; animation: none; } }
.btn.m-tm { --c: #8fb24a; }
.btn.m-ar { --c: #35b7d1; }
.btn.m-jt { --c: #e6a23a; }
.btn.m-lg { --c: #e0654a; }
.btn.m-bl { --c: #e0558f; }
.btn.m-nl { --c: #7b5cff; }
.m-cn { --c: #3b7cff; }
body.pelawat #walletBtn { display: none !important; } /* v19.28: pelawat tiada MD */
.btn.m-dw { --c: #67b832; }
.btn.m-bz { --c: #a566d9; }
.btn.m-sl { --c: #e8c33a; }
.btn.m-mp { --c: #cf9b3a; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sheetx { display: none; }
@media (max-width: 1000px) {
  .panel { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 30; max-height: 70vh; overflow-y: auto; border-width: 1px 0 0; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateY(105%); transition: transform .22s; box-shadow: 0 -12px 40px rgba(0,0,0,.6); }
  .panel.open { transform: none; }
  .panel .row { position: sticky; bottom: calc(-16px - env(safe-area-inset-bottom, 0px)); background: var(--bg2); padding: 10px 0 4px; }
  .sheetx { display: inline-flex; position: absolute; top: 8px; right: 10px; }
}
@media (prefers-reduced-motion: reduce) { .panel { transition: none; } .pin polygon, .st { transition: none; } }

/* ---------- Senarai misi ---------- */
.tlist { display: grid; gap: 18px; margin-top: 26px; }
.tlist h4 { margin: 0 0 8px; font-family: var(--font-util); font-size: 17px; letter-spacing: .1em; text-transform: uppercase; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tlist h4 i { width: 14px; height: 14px; clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); display: inline-block; }
.tlist h4 small { color: var(--muted); font-size: 13px; }
.mrows { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.mrow { appearance: none; text-align: left; background: var(--bg2); border: 1px solid var(--line); padding: 9px 12px; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; cursor: pointer; }
.mrow:hover, .mrow.sel { border-color: var(--amber); }
.mrow .code { font-family: var(--font-util); font-weight: 700; font-size: 18px; color: #0b100b; text-align: center; padding: 4px 0; clip-path: polygon(14% 0, 86% 0, 100% 50%, 86% 100%, 14% 100%, 0 50%); }
.mrow .nm { font-weight: 600; line-height: 1.2; }
.mrow .sub { font-size: 13px; color: var(--muted); }
.mrow .stars { color: var(--amber); letter-spacing: 2px; font-size: 14px; white-space: nowrap; }

/* ---------- Jadual kedudukan ---------- */
.board { display: grid; gap: 4px; margin-top: 10px; }
.brow { display: grid; grid-template-columns: 38px 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; background: var(--bg2); border: 1px solid var(--line); padding: 7px 12px; }
.brow.me { border-color: var(--amber); background: #1d2615; }
.brow .no { font-family: var(--font-display); font-size: 20px; color: var(--khaki); text-align: center; }
.brow .nm { font-family: var(--font-util); font-weight: 700; font-size: 18px; letter-spacing: .04em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brow .rk { font-size: 13px; color: var(--muted); font-family: var(--font-util); letter-spacing: .05em; text-transform: uppercase; }
.brow .xp { font-family: var(--font-util); font-weight: 700; font-size: 20px; color: var(--amber); text-align: right; font-variant-numeric: tabular-nums; }
.brow .xp small { display: block; font-size: 12px; color: var(--muted); font-weight: 500; }
.notice { background: var(--bg2); border: 1px solid var(--line); border-left: 4px solid var(--khaki); padding: 10px 14px; font-size: 15px; margin: 8px 0; max-width: 80ch; }
.notice.warn { border-left-color: var(--amber); }
.seg { display: inline-flex; flex-wrap: wrap; max-width: 100%; border: 1px solid var(--line2); }
.seg button { flex: 1 1 auto; }
.seg button { appearance: none; background: transparent; border: 0; padding: 6px 14px; font-family: var(--font-util); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; font-size: 15px; color: var(--muted); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--khaki); color: #0b100b; }

/* ---------- Pangkat ---------- */
.ranks { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; margin-top: 12px; }
.rk-card { background: var(--bg2); border: 1px solid var(--line); padding: 10px 12px; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; align-items: center; }
.rk-card.on { border-color: var(--amber); background: #1d2615; }
.rk-card.lock { opacity: .55; }
.rk-card b { font-family: var(--font-util); font-size: 18px; letter-spacing: .04em; text-transform: uppercase; display: block; line-height: 1.1; }
.rk-card span { font-size: 13px; color: var(--muted); font-family: var(--font-util); letter-spacing: .05em; text-transform: uppercase; }

/* ---------- Pasukan / bilik ---------- */
.card { background: var(--bg2); border: 1px solid var(--line); padding: 16px; display: grid; gap: 12px; }
.field { display: grid; gap: 4px; }
.field label { font-family: var(--font-util); font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.field input, .field select { background: #0b100b; color: var(--ink); border: 1px solid var(--line2); padding: 10px 12px; font: inherit; font-size: 17px; min-width: 0; width: 100%; }
.peers { display: grid; gap: 4px; }
.prow { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; background: #0f160e; border: 1px solid var(--line); padding: 6px 10px; }
.prow .nm { font-family: var(--font-util); font-weight: 700; font-size: 17px; letter-spacing: .04em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pill { font-family: var(--font-util); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; border: 1px solid var(--khaki); color: var(--khaki); padding: 1px 8px; }
.pill.go { border-color: var(--ok); color: var(--ok); }
.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; }

/* ---------- Modal ---------- */
.overlay { position: fixed; top:0;right:0;bottom:0;left:0;inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px; background: rgba(6,9,6,.9); overflow-y: auto; touch-action: pan-y; }
.mcard { width: min(680px, 100%); background: #151c13; border: 1px solid var(--line); padding: 22px; display: grid; gap: 14px; }
.mcard h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 7vw, 46px); line-height: 1; margin: 0; color: var(--khaki); text-wrap: balance; }
.mcard h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(22px, 5vw, 32px); margin: 0; color: var(--khaki); text-wrap: balance; }
.mcard p { margin: 0; max-width: 62ch; }
.kbd { font-family: var(--font-util); font-weight: 700; border: 1px solid var(--line); padding: 1px 7px; color: var(--amber); }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px 16px; font-size: 15px; }
.opts { display: grid; gap: 8px; }
.opt { appearance: none; text-align: left; font: inherit; font-size: 17px; line-height: 1.35; color: var(--ink); background: #1d2719; border: 1px solid var(--line); padding: 12px 14px; cursor: pointer; display: grid; grid-template-columns: 28px 1fr; gap: 8px; align-items: start; }
.opt:hover:not(:disabled) { border-color: var(--amber); }
.opt b { font-family: var(--font-util); color: var(--amber); }
.opt.right { background: #23401f; border-color: var(--ok); }
.opt.wrong { background: #46201d; border-color: var(--danger); }
.opt:disabled { cursor: default; color: var(--ink); }
#qtext { font-size: clamp(18px, 4.6vw, 24px); font-weight: 600; line-height: 1.3; }
#expl { padding: 10px 12px; border-left: 3px solid var(--khaki); background: rgba(200,178,115,.08); line-height: 1.45; font-size: 15.5px; }
#expl.fb { border-left: 4px solid #6fcf6f; background: rgba(111,207,111,.07); animation: fbPop .35s ease-out; }
#expl.fb.bad { border-left-color: #e0584d; background: rgba(224,88,77,.08); }
#expl .fbt { font-family: var(--font-display); font-size: 28px; letter-spacing: .04em; color: #9fe870; line-height: 1.1; }
#expl.bad .fbt { color: #ff8a7a; }
#expl .chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 4px; }
#expl .chip { background: rgba(255,255,255,.07); border: 1px solid var(--line); padding: 2px 8px; font-size: 13px; font-family: var(--font-util); font-weight: 700; }
#expl .chip.gold { color: #ffd75e; border-color: #c9a23a; }
#expl .pips { display: flex; gap: 4px; align-items: center; margin: 6px 0; flex-wrap: wrap; }
#expl .pips i { width: 13px; height: 13px; border-radius: 50%; background: rgba(255,255,255,.12); border: 1px solid var(--line); }
#expl .pips i.on { background: #f4ab3a; box-shadow: 0 0 8px rgba(244,171,58,.7); }
#expl .fbk { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
#expl .fbk b { display: block; color: var(--amber); letter-spacing: .06em; font-size: 12px; text-transform: uppercase; margin-bottom: 2px; }
.mcard.fbwin { box-shadow: 0 0 0 2px #6fcf6f, 0 0 36px rgba(111,207,111,.3); }
.mcard.fbbad { box-shadow: 0 0 0 2px #e0584d, 0 0 30px rgba(224,88,77,.25); }
@keyframes fbPop { 0% { transform: scale(.94); opacity: 0; } 60% { transform: scale(1.03); } 100% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #expl.fb { animation: none; } }
#expl small { display: block; color: var(--muted); margin-top: 4px; }
.nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.nums div { border: 1px solid var(--line); padding: 8px 12px; }
.nums b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 28px; color: var(--amber); font-variant-numeric: tabular-nums; }
.nums span { font-size: 13px; color: var(--muted); text-transform: uppercase; font-family: var(--font-util); letter-spacing: .06em; }
.review { display: grid; gap: 6px; }
.review details { background: #0f160e; border: 1px solid var(--line); padding: 8px 12px; }
.review summary { cursor: pointer; font-size: 15px; }
.review p { font-size: 14.5px; margin-top: 6px; color: var(--muted); }
.review b { color: var(--ok); }
.rankup { text-align: center; padding: 10px; border: 1px solid var(--amber); background: #231f10; display: grid; gap: 6px; justify-items: center; }
.rankup .rn { font-family: var(--font-display); font-size: 26px; color: var(--amber); }
.lbrow { display: grid; grid-template-columns: 34px 30px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 4px 8px; border: 1px solid var(--line); background: #0f160e; }
.lbrow.me { border-color: var(--amber); }

/* ---------- Lapisan permainan ---------- */
#game { position: fixed; top:0;right:0;bottom:0;left:0;inset: 0; z-index: 50; background: #000; }
#stage { position: absolute; top:0;right:0;bottom:0;left:0;inset: 0; }
#stage canvas { display: block; width: 100%; height: 100%; }
#bossBar { position: absolute; top: 122px; left: 50%; transform: translateX(-50%); width: min(560px, 78vw); text-align: center; pointer-events: none; z-index: 3; }
#sniperWarn { position: absolute; top: 40%; left: 50%; transform: translateX(-50%); padding: 6px 16px; background: rgba(120,0,0,.75); color: #fff; border: 1px solid #ff4a4a; font-family: var(--font-util); font-weight: 700; letter-spacing: .08em; z-index: 4; pointer-events: none; animation: snw .5s infinite alternate; }
@keyframes snw { from { opacity: 1; } to { opacity: .55; } }
#bossBar .bb-n { font-size: 15px; letter-spacing: .14em; color: #ffd75e; text-shadow: 0 1px 2px #000; }
#bossBar .bb-hp { height: 14px; background: rgba(0,0,0,.6); border: 1px solid #c8b273; margin: 3px 0; }
#bossBar .bb-hp i { display: block; height: 100%; width: 100%; background: linear-gradient(#e0584d, #a02820); transition: width .15s; }
#bossBar.sh .bb-hp i { background: linear-gradient(#5ec8ff, #2a7ab8); }
#bossBar .bb-s { font-size: 14px; color: #fff; text-shadow: 0 1px 2px #000; }
.hud { position: absolute; top:0;right:0;bottom:0;left:0;inset: 0; pointer-events: none; font-family: var(--font-util); font-weight: 600; letter-spacing: .04em; }
.box { background: var(--panel); border: 1px solid var(--line); padding: 8px 12px; }
.tl { position: absolute; left: 12px; top: calc(12px + env(safe-area-inset-top, 0px)); display: grid; gap: 6px; width: min(240px, 46vw); }
.bar { height: 12px; background: rgba(255,255,255,.1); position: relative; }
.bar > i { position: absolute; top:0;right:auto;bottom:0;left:0;inset: 0 auto 0 0; display: block; width: 100%; transition: width .15s; }
#hpFill { background: var(--ok); }
#spFill { background: var(--khaki); }
.lbl { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); text-transform: uppercase; }
.tc { position: absolute; left: 50%; top: calc(12px + env(safe-area-inset-top, 0px)); transform: translateX(-50%); text-align: center; min-width: 150px; }
.tc b { display: block; font-size: 22px; color: var(--amber); font-variant-numeric: tabular-nums; }
.tc span { font-size: 13px; color: var(--muted); text-transform: uppercase; }
.tr { position: absolute; right: 12px; top: calc(12px + env(safe-area-inset-top, 0px)); display: grid; gap: 6px; justify-items: end; }
#mini { width: 120px; height: 120px; border: 1px solid var(--line); background: rgba(13,18,12,.7); }
.stat { font-size: 15px; text-transform: uppercase; }
.stat b { color: var(--amber); font-variant-numeric: tabular-nums; }
.bl { position: absolute; left: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
.ammo { font-size: 34px; line-height: 1; font-variant-numeric: tabular-nums; }
.ammo small { font-size: 13px; color: var(--muted); margin-left: 6px; text-transform: uppercase; }
#feed { position: absolute; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: grid; gap: 4px; justify-items: center; width: min(92vw, 520px); }
.msg { background: var(--panel); border-left: 3px solid var(--khaki); padding: 5px 12px; font-size: 16px; text-align: center; }
.msg.good { border-color: var(--ok); } .msg.bad { border-color: var(--danger); }
#cross { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; transform: translate(-50%, -50%); }
#cross::before, #cross::after { content: ""; position: absolute; background: var(--ink); opacity: .9; }
#cross::before { left: 12px; top: 0; width: 2px; height: 26px; } #cross::after { top: 12px; left: 0; height: 2px; width: 26px; }
#cross i { position: absolute; left: 11px; top: 11px; width: 4px; height: 4px; background: var(--bg); z-index: 1; }
#prompt { position: absolute; left: 50%; top: 58%; transform: translateX(-50%); font-size: 20px; color: var(--amber); background: var(--panel); border: 1px solid var(--amber); padding: 6px 14px; text-transform: uppercase; }
#hitm { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; opacity: 0; }
#hitm.on { opacity: 1; }
#hitm i { position: absolute; width: 11px; height: 2px; background: #fff; box-shadow: 0 0 3px rgba(0,0,0,.7); }
#hitm i:nth-child(1) { transform: translate(-19px, -15px) rotate(45deg); } #hitm i:nth-child(2) { transform: translate(8px, -15px) rotate(-45deg); }
#hitm i:nth-child(3) { transform: translate(-19px, 14px) rotate(-45deg); } #hitm i:nth-child(4) { transform: translate(8px, 14px) rotate(45deg); }
#hitm.head i { background: #ffb02e; } #hitm.kill i { background: #ff4a3a; width: 15px; }
#dmgring { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
#dmgring .dw { position: absolute; left: -70px; top: -170px; width: 140px; height: 50px; transform-origin: 70px 170px; border-radius: 50% 50% 0 0; background: radial-gradient(ellipse at 50% 100%, rgba(255,60,50,.9), rgba(255,60,50,0) 72%); opacity: 1; transition: opacity 1s ease-out; }
#blood { position: absolute; top:0;right:0;bottom:0;left:0;inset: 0; overflow: hidden; pointer-events: none; }
#blood i { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(150,10,16,.75) 0%, rgba(120,8,12,.5) 45%, rgba(120,8,12,0) 70%); opacity: 1; transition: opacity 2.6s ease-out; }
#lowhp { position: absolute; top:0;right:0;bottom:0;left:0;inset: 0; pointer-events: none; opacity: 0; box-shadow: inset 0 0 120px 30px rgba(200,20,20,.55); }
#lowhp.on { opacity: 1; animation: lowpulse .9s ease-in-out infinite; }
@keyframes lowpulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #lowhp.on { animation: none; opacity: .7; } #dmgring .dw, #blood i { transition: none; } }
.tbtn, #stick { scale: var(--tbs, 1); }
.setrow { display: grid; grid-template-columns: 9.5em 1fr 3.4em; gap: 10px; align-items: center; margin: 6px 0; font-size: 15px; text-align: left; }
.setrow select { background: var(--panel, #1b2417); color: var(--ink, #f1ead6); border: 1px solid var(--line, #3a4430); padding: 6px 8px; min-height: 34px; font: inherit; grid-column: 2 / 4; }
.setrow input[type=range] { width: 100%; accent-color: var(--amber, #e0a63a); min-height: 28px; }
.setrow input[type=checkbox] { width: 24px; height: 24px; accent-color: var(--amber, #e0a63a); }
.setv { color: var(--khaki); font-size: 13px; text-align: right; }
#hit { position: absolute; top:0;right:0;bottom:0;left:0;inset: 0; pointer-events: none; box-shadow: inset 0 0 90px 20px rgba(224,88,77,0); transition: box-shadow .25s; }
#hit.on { box-shadow: inset 0 0 90px 20px rgba(224,88,77,.6); }
#zonewarn { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); color: var(--danger); font-size: 22px; text-transform: uppercase; background: var(--panel); border: 1px solid var(--danger); padding: 6px 16px; }
#mission-bar { position: absolute; left: 12px; top: calc(92px + env(safe-area-inset-top, 0px)); max-width: min(240px, 46vw); font-size: 14px; text-transform: uppercase; }
#mission-bar b { color: var(--amber); display: block; font-size: 15px; }
#sb { position: absolute; right: 12px; top: calc(206px + env(safe-area-inset-top, 0px)); min-width: 150px; max-width: 46vw; font-size: 14px; text-transform: uppercase; display: grid; gap: 2px; }
#sb div { display: flex; justify-content: space-between; gap: 10px; }
#sb .me { color: var(--amber); cursor: default; padding: 0; border: 0; background: none; }
#sb span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#dead { position: absolute; top:0;right:0;bottom:0;left:0;inset: 0; display: grid; place-items: center; background: rgba(60,8,6,.55); text-align: center; font-size: 26px; text-transform: uppercase; }
#count { position: absolute; top:0;right:0;bottom:0;left:0;inset: 0; display: grid; place-items: center; background: rgba(6,9,6,.75); text-align: center; }
#count b { font-family: var(--font-display); font-size: 120px; color: var(--amber); font-weight: 400; }
#touch { position: absolute; top:0;right:0;bottom:0;left:0;inset: 0; pointer-events: none; }
#stick { position: absolute; left: 22px; bottom: calc(40px + env(safe-area-inset-bottom, 0px)); width: 130px; height: 130px; border: 2px solid var(--line); border-radius: 50%; pointer-events: auto; background: rgba(13,18,12,.35); }
#knob { position: absolute; left: 40px; top: 40px; width: 50px; height: 50px; border-radius: 50%; background: rgba(200,178,115,.6); }
.tbtn { position: absolute; width: 74px; height: 74px; border-radius: 50%; border: 2px solid var(--khaki); background: rgba(13,18,12,.55); color: var(--khaki); font-family: var(--font-util); font-weight: 700; font-size: 17px; text-transform: uppercase; pointer-events: auto; display: grid; place-items: center; }
#bFire { right: 22px; bottom: calc(70px + env(safe-area-inset-bottom, 0px)); width: 88px; height: 88px; background: rgba(224,88,77,.5); border-color: var(--danger); color: #fff; }
#bUse { right: 126px; bottom: calc(40px + env(safe-area-inset-bottom, 0px)); }
#bJump { right: 30px; bottom: calc(172px + env(safe-area-inset-bottom, 0px)); width: 64px; height: 64px; }
@media (max-width: 520px) { #mini { width: 92px; height: 92px; } .tc b { font-size: 18px; } .ammo { font-size: 26px; } #sb { top: calc(160px + env(safe-area-inset-top, 0px)); } .brand { font-size: 19px; } }
@media (prefers-reduced-motion: reduce) { .bar > i, #hit { transition: none; } }

#btnSnd, #btnFs { z-index: 60; pointer-events: auto; }
.crest { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 1px solid var(--amber); display: inline-block; vertical-align: middle; background: #fff; }
.crest.ini { display: inline-flex; align-items: center; justify-content: center; font: 700 12px var(--font-util); color: #17140a; background: var(--khaki); letter-spacing: 0; }
#meIns { position: relative; display: inline-block; }
#meIns svg { position: relative; z-index: 1; }
.crestbk { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background-size: cover; background-position: center; opacity: .4; z-index: 0; }
#tankHud { position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 5; font-family: var(--font-util); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: 15px; color: #5ec8ff; background: var(--panel); border: 1px solid #5ec8ff; padding: 6px 14px; max-width: 94vw; text-align: center; pointer-events: none; }
#qstmt { display: grid; gap: 6px; margin: 8px 0; padding: 10px 12px; border: 1px solid var(--line); background: #1d2719; line-height: 1.4; }
#qstmt .qs-a { color: var(--amber); font-weight: 600; }
.qtimer { height: 7px; background: #1d2719; border: 1px solid var(--line); margin: 6px 0; }
.qtimer i { display: block; height: 100%; width: 100%; background: var(--amber); }
.mq, .mans { display: grid; gap: 6px; margin: 6px 0; }
.opt.act { border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber) inset; }
.opt.used { opacity: .55; }
.brsep { text-align: center; color: var(--muted, #9aa); font-size: 13px; padding: 2px 0; }
#rkBanner { position: fixed; z-index: 90; left: 50%; top: calc(70px + env(safe-area-inset-top, 0px)); transform: translateX(-50%); background: #231f10; border: 1px solid var(--amber); color: var(--amber); font-family: var(--font-util); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 8px 16px; max-width: 92vw; text-align: center; box-shadow: 0 6px 24px rgba(0,0,0,.5); }
.tourbox { background: var(--sea); border: 1px solid var(--line); }
.tourmap { width: 100%; height: auto; max-height: 320px; display: block; }
.tourmap .tland { fill: #4b6137; stroke: #0b100b; stroke-width: 1px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.tourmap .tp { cursor: pointer; }
.tourmap .tp text { font-family: var(--font-util); font-weight: 700; fill: #0b100b; pointer-events: none; }
.tourmap .tp:focus-visible circle { stroke: #fff; }
.tourmap .tname { font-family: var(--font-util); letter-spacing: .25em; fill: rgba(200,178,115,.5); }
.tourinfo { background: #0f160e; border: 1px solid var(--line); border-left: 3px solid var(--amber); padding: 8px 10px; font-size: 14.5px; display: grid; gap: 3px; }
.tourlink { color: var(--amber); font-family: var(--font-util); font-size: 14px; letter-spacing: .06em; text-transform: uppercase; }
.tourlist { display: flex; flex-wrap: wrap; gap: 5px; }
.tourit { appearance: none; background: transparent; border: 1px solid var(--line); color: var(--muted); font-family: var(--font-util); font-size: 14px; padding: 3px 8px; cursor: pointer; text-align: left; }
.tourit.on { border-color: var(--amber); color: var(--amber); }
.panel details summary { padding: 2px 0; }
#hudBtns { position: fixed; z-index: 60; left: 12px; top: calc(190px + env(safe-area-inset-top, 0px)); display: flex; flex-direction: column; gap: 8px; align-items: flex-start; pointer-events: none; }
#hudBtns > .btn { position: static; pointer-events: auto; }
@media (max-height: 520px) {
  #hudBtns { left: 50%; transform: translateX(-50%); top: calc(104px + env(safe-area-inset-top, 0px)); flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 46vw; }
  #hudBtns > .btn { font-size: 13px; padding: 4px 9px; }
  .tr { gap: 4px; } #mini { width: 82px; height: 82px; }
  .tr .stat { padding: 3px 9px; font-size: 13px; }
  .tc b { font-size: 17px; } .tc { padding: 5px 10px; }
  #sb { left: 12px; right: auto; top: calc(158px + env(safe-area-inset-top, 0px)); min-width: 0; max-width: 40vw; font-size: 12px; padding: 4px 8px; }
  #sb div:nth-child(n+4) { display: none; }
  #chatLog { top: calc(150px + env(safe-area-inset-top, 0px)); }
  #stick { width: 112px; height: 112px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); left: 18px; }
  #knob { left: 31px; top: 31px; width: 50px; height: 50px; }
  #mission-bar { top: calc(84px + env(safe-area-inset-top, 0px)); font-size: 12px; }
  .ammo { font-size: 26px; }
  .bl { left: 50%; transform: translateX(-50%); padding: 4px 10px; }
  .tbtn { font-size: 13px; }
  #bJump, #bSwap { width: 56px; height: 56px; }
  #bCrouch { left: 142px; bottom: calc(88px + env(safe-area-inset-bottom, 0px)); width: 52px; height: 52px; }
  #bRun { left: 142px; bottom: calc(30px + env(safe-area-inset-bottom, 0px)); width: 52px; height: 52px; }
  #bUse { width: 64px; height: 64px; }
}
@media (orientation: portrait) and (max-width: 700px) {
  .tl { width: 54vw; }
  .tc { left: 12px; transform: none; top: calc(204px + env(safe-area-inset-top, 0px)); min-width: 0; width: 54vw; text-align: left; padding: 5px 10px; }
  .tc b { font-size: 18px; }
  #hudBtns { left: 12px; transform: none; top: calc(300px + env(safe-area-inset-top, 0px)); flex-direction: row; flex-wrap: wrap; max-width: 60vw; gap: 6px; }
  #hudBtns > .btn { font-size: 13px; padding: 4px 9px; }
  #mission-bar { top: calc(94px + env(safe-area-inset-top, 0px)); font-size: 13px; max-width: 54vw; }
  #mini { width: 84px; height: 84px; }
  .tr .stat { padding: 3px 9px; font-size: 13px; }
  #sb { left: auto !important; right: 12px !important; top: calc(172px + env(safe-area-inset-top, 0px)) !important; max-width: 40vw; font-size: 12px; }
  #sb div:nth-child(n+4) { display: none; }
  #bRun { left: 22px !important; bottom: calc(190px + env(safe-area-inset-bottom, 0px)) !important; width: 56px !important; height: 56px !important; }
  #bCrouch { left: 22px !important; bottom: calc(254px + env(safe-area-inset-bottom, 0px)) !important; width: 56px !important; height: 56px !important; }
  .tbtn { font-size: 14px; }
}
#rankBody .seg { display: inline-flex; margin: 0 10px 10px 0; }

/* gudang dan senjata */
.avgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.avcard { background: var(--panel); border: 1px solid var(--line, #3a4430); padding: 10px; display: grid; gap: 4px; text-align: center; justify-items: center; }
.avcard.on { border-color: var(--amber); }
.avhero { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; padding: 14px; margin-bottom: 14px; border: 1px solid var(--amber); background: radial-gradient(ellipse at 22% 40%, rgba(224,179,65,.22), rgba(20,28,16,.0) 62%), linear-gradient(135deg, #1d2818, #10160e); }
.avhero .avhp { filter: drop-shadow(0 6px 10px rgba(0,0,0,.55)); animation: avfloat 3.2s ease-in-out infinite; }
.avinfo { display: grid; gap: 5px; align-content: center; min-width: 0; }
.avinfo .avname { font-family: var(--font-display); font-weight: 400; font-size: 30px; line-height: 1; color: var(--ink); text-transform: uppercase; letter-spacing: .02em; }
.avinfo .avst { color: #f4ab3a; letter-spacing: .12em; }
.avbar { height: 9px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); overflow: hidden; }
.avbar i { display: block; height: 100%; background: linear-gradient(90deg, #c8892a, #ffd45e); }
.avnext { font-size: 14px; color: #d8d1bb; }
.rar { justify-self: start; font: 700 12px/1 var(--font-body, sans-serif); letter-spacing: .12em; text-transform: uppercase; padding: 4px 8px; border: 1px solid currentColor; }
.rar.cm { color: #9bc17a; } .rar.rr { color: #6aa7e0; } .rar.ep { color: #c58bff; } .rar.lg { color: #ffc94d; background: rgba(255,201,77,.12); }
.avcard { position: relative; overflow: hidden; transition: transform .15s, border-color .15s; background: radial-gradient(ellipse at 50% 30%, rgba(255,255,255,.07), transparent 65%), var(--panel); }
.avcard:hover { transform: translateY(-3px); }
.avcard.r-rr { border-color: #3f6e9c; } .avcard.r-ep { border-color: #7d4fb0; } .avcard.r-lg { border-color: #d9a82c; box-shadow: 0 0 14px rgba(255,201,77,.28); }
.avcard.r-lg::after { content: ""; position: absolute; top: 0; bottom: 0; width: 38%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.18), transparent); animation: avshine 4.5s ease-in-out infinite; pointer-events: none; }
.avcard .rar { position: absolute; top: 6px; left: 6px; font-size: 10px; padding: 3px 5px; background: rgba(8,12,7,.7); }
.avcard.on { box-shadow: 0 0 0 2px var(--amber) inset, 0 0 16px rgba(244,171,58,.35); }
.avcard .avstars { color: #f4ab3a; letter-spacing: .1em; font-size: 14px; }
.avcard .avlack { font-size: 13px; color: #ff9a8a; }
.avcard .avprice { font: 700 15px/1 var(--font-body, sans-serif); color: #ffd45e; }
@keyframes avfloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes avshine { 0%, 55% { left: -60%; } 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) { .avhero .avhp, .avcard.r-lg::after { animation: none; } .avcard:hover { transform: none; } }
@media (max-width: 520px) { .avhero { grid-template-columns: 1fr; justify-items: center; text-align: center; } .avinfo { justify-items: center; } .avinfo .rar { justify-self: center; } }

.avcard.lock .avpv { filter: grayscale(.35) brightness(.9); }
.acgrid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.acgrid .btn[aria-pressed="true"] { border-color: var(--amber); color: var(--amber); }
#bRun { left: 168px; bottom: calc(46px + env(safe-area-inset-bottom, 0px)); width: 60px; height: 60px; }
#bCrouch { left: 168px; bottom: calc(118px + env(safe-area-inset-bottom, 0px)); width: 60px; height: 60px; }
#bCrouch.on, #btnCrouch.on { border-color: var(--ok); color: var(--ok); background: rgba(124,200,100,.25); }
#bRun.on { border-color: var(--ok); color: var(--ok); background: rgba(124,200,100,.25); }
#bSwap { right: 110px; bottom: calc(172px + env(safe-area-inset-bottom, 0px)); width: 64px; height: 64px; }
#btnExit { z-index: 60; pointer-events: auto; }
.shopRow { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; border: 1px solid var(--line); padding: 8px 10px; }
#shopBody { display: grid; gap: 8px; max-height: 64vh; overflow: auto; }
#btnExitQ { margin-top: 10px; }
.hud { z-index: 2; }

.homebar { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; margin-bottom: 18px; }
.dayrow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin: 6px 0; }
.dayb { text-align: center; font-size: 12px; padding: 5px 0; border: 1px solid var(--line); color: var(--muted); }
.dayb.on { background: var(--amber); color: #111; border-color: var(--amber); }
.dayb.today { outline: 2px solid var(--amber); outline-offset: 1px; }
.tierrow { font-size: 14px; margin: 3px 0; color: var(--muted); }
.tierrow.ok { color: var(--amber); }
.hcard { background: var(--panel); border: 1px solid var(--line); padding: 12px 14px; }
.hq { font-size: 19px; color: var(--ink); line-height: 1.25; margin-top: 2px; }
.hq.flame { color: var(--amber); font-family: var(--font-display); font-size: 26px; }
.chips { display: inline-flex; gap: 3px; margin-left: 6px; vertical-align: middle; }
.chip { font-style: normal; font-family: var(--font-util); font-weight: 700; font-size: 11px; background: var(--amber); color: #0b100b; padding: 1px 5px; letter-spacing: .04em; }
.lobbylog { height: 170px; overflow-y: auto; background: rgba(0,0,0,.25); border: 1px solid var(--line); padding: 8px; display: grid; gap: 3px; align-content: start; }
.cl { font-size: 15px; } .cl b { color: var(--amber); } .cl.me b { color: var(--khaki); }
#btnMic, #btnChat { z-index: 60; }
#btnMic.on, #lobbyMic.on { border-color: var(--ok); color: var(--ok); }
#chatLog { position: fixed; z-index: 55; left: 50%; transform: translateX(-50%); top: calc(118px + env(safe-area-inset-top, 0px)); width: min(360px, 56vw); pointer-events: none; display: grid; gap: 2px; text-shadow: 0 1px 2px #000; }
#chatLog .cl { background: rgba(10,14,10,.6); padding: 3px 8px; }
#chatBar { position: fixed; z-index: 65; left: 12px; right: 12px; bottom: 20px; display: flex; gap: 8px; max-width: 520px; }
#chatBar input { flex: 1; }
.opt.picked { border-color: var(--amber); background: rgba(244,171,58,.14); }

/* papan pemuka guru */
.gstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 12px 0; }
.gstat { background: var(--panel); border: 1px solid var(--line); padding: 10px 14px; }
.gstat b { display: block; font-family: var(--font-display); font-size: 28px; color: var(--amber); line-height: 1.1; }
.gstat span { font-size: 13px; color: var(--muted); font-family: var(--font-util); letter-spacing: .06em; text-transform: uppercase; }
.gwrap { overflow-x: auto; margin-top: 10px; border: 1px solid var(--line); }
.gtable { border-collapse: collapse; width: 100%; min-width: 640px; font-size: 15px; }
.gtable th { text-align: left; font-family: var(--font-util); font-size: 13px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); padding: 8px 10px; background: var(--bg2); position: sticky; top: 0; }
.gtable td { padding: 7px 10px; border-top: 1px solid var(--line); }
.gtable td.num, .gtable th.num { text-align: right; font-variant-numeric: tabular-nums; }
.gtable tr.idle td { color: var(--muted); }
.gbar { display: inline-block; width: 100px; height: 8px; vertical-align: middle; margin-right: 8px; background: var(--bg2); border: 1px solid var(--line); }
.gbar i { display: block; height: 100%; background: var(--amber); }
.gbar.low i { background: #d9604a; }
.gweak { display: grid; gap: 6px; margin: 8px 0 14px; }
.gweak div { background: var(--panel); border: 1px solid #d9604a; padding: 8px 12px; }
#guruBody .seg { display: inline-flex; margin: 0 10px 10px 0; }


/* bom tangan dan RPG */
.gtag { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-top: 3px; }
.gtag span { color: var(--amber); font-weight: 700; }
#bGren { right: 270px; bottom: calc(172px + env(safe-area-inset-bottom, 0px)); width: 64px; height: 64px; }
@media (max-width: 520px) { #bGren { width: 56px; height: 56px; } }
@media (orientation: portrait) and (max-width: 700px) { #bGren { right: 30px !important; bottom: calc(250px + env(safe-area-inset-bottom, 0px)) !important; } }
.shopgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin-top: 8px; }
.shopcard { background: var(--panel); border: 1px solid var(--line, #3a4430); padding: 12px; display: grid; gap: 6px; }
/* teropong penembak tepat */
#scopeOv { position: absolute; top:0;right:0;bottom:0;left:0;inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(circle at 50% 50%, transparent 0, transparent 31vmin, rgba(0,0,0,.94) 31.5vmin); }
#scopeOv .rg { position: absolute; left: 50%; top: 50%; width: 63vmin; height: 63vmin; transform: translate(-50%, -50%); border: 2px solid #000; border-radius: 50%; }
#scopeOv .h, #scopeOv .v { position: absolute; background: rgba(0,0,0,.85); }
#scopeOv .h { left: calc(50% - 31vmin); width: 62vmin; top: 50%; height: 1px; }
#scopeOv .v { top: calc(50% - 31vmin); height: 62vmin; left: 50%; width: 1px; }
#scopeOv .d { position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: #e0584d; }
#cpFoot { text-align: center; padding: 18px 16px calc(22px + env(safe-area-inset-bottom, 0px)); font-family: var(--font-util); font-size: 12px; letter-spacing: .06em; color: var(--muted); line-height: 1.6; }
#cpFoot b { color: var(--khaki); font-weight: 700; }
#cpFoot a { color: var(--khaki); text-decoration: underline; }
.subjbar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 18px; position: relative; padding-top: 26px; }
.subjbar .sl { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 10px; font-family: var(--font-util); font-weight: 700; font-size: 13px; letter-spacing: .26em; text-transform: uppercase; color: var(--amber); }
.subjbar .sl::before { content: ""; width: 26px; height: 3px; background: var(--amber); box-shadow: 0 0 10px var(--amber); }
.subjbar .sl em { font-style: normal; color: var(--muted); letter-spacing: .08em; text-transform: none; font-weight: 600; font-size: 13px; }
.subjbar button { --c: var(--amber); appearance: none; cursor: pointer; position: relative; overflow: hidden; display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 4px 14px; align-items: center; text-align: left; font-family: var(--font-util); color: var(--ink); background: linear-gradient(135deg, color-mix(in srgb, var(--c) 20%, #0b100b), #0f160e 70%); border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); border-left: 5px solid var(--c); padding: 12px 16px; min-height: 84px; transition: transform .18s, box-shadow .18s, background .18s; }
.subjbar button:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(0,0,0,.45), 0 0 0 1px var(--c); }
.subjbar button .si { grid-row: 1 / span 2; width: 54px; height: 54px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); border: 1px solid color-mix(in srgb, var(--c) 60%, transparent); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.subjbar button .si svg { width: 28px; height: 28px; }
.subjbar button .si b { font: 700 30px/1 var(--ar); }
.subjbar button .sn { font-weight: 700; font-size: 19px; letter-spacing: .05em; text-transform: uppercase; line-height: 1.1; align-self: end; }
.subjbar button .sm { font-weight: 600; font-size: 13px; letter-spacing: .08em; color: var(--muted); align-self: start; }
.subjbar button .sk { position: absolute; bottom: 8px; right: 10px; display: none; font-weight: 700; font-size: 11px; letter-spacing: .18em; padding: 2px 8px; background: #0b100b; color: var(--c); }
.subjbar .soon { display: none; }
:root { --ar: "Noto Naskh Arabic", "Amiri", "Scheherazade New", "Geeza Pro", "Traditional Arabic", "Segoe UI", Tahoma, serif; }
.ar-line { direction: rtl; text-align: right; font-family: var(--ar); font-size: 1.3em; line-height: 1.8; }
.ar-in { font-family: var(--ar); font-size: 1.18em; }
#qtext, #qstmt, .review summary, .mq { white-space: pre-line; }
.opt .ar-line { font-size: 1.45em; line-height: 1.6; }
.subjbar button[aria-pressed="true"] { color: #0b100b; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 100%, #fff 18%), var(--c)); border-color: var(--c); box-shadow: 0 0 0 1px var(--c), 0 0 26px color-mix(in srgb, var(--c) 55%, transparent); }
.subjbar button[aria-pressed="true"]::after { content: ""; position: absolute; top: 0; bottom: 0; width: 70px; left: -110px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-20deg); animation: sjshine 4.5s ease-in-out infinite; }
@keyframes sjshine { 0%, 55% { left: -110px; } 100% { left: 110%; } }
.subjbar button[aria-pressed="true"] .si { color: #0b100b; background: rgba(11,16,11,.18); border-color: rgba(11,16,11,.45); }
.subjbar button[aria-pressed="true"] .sm { color: rgba(11,16,11,.78); }
.subjbar button[aria-pressed="true"] .sk { display: block; }
.subjbar button.sj-lock { opacity: .62; filter: grayscale(.55); }
@media (prefers-reduced-motion: reduce) { .subjbar button, .subjbar button[aria-pressed="true"]::after { transition: none; animation: none; } }
@media (min-width: 761px) and (max-width: 1100px) { .subjbar { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .subjbar { grid-template-columns: minmax(0, 1fr); gap: 8px; } .subjbar button { min-height: 68px; padding: 8px 12px; grid-template-columns: 44px minmax(0, 1fr); } .subjbar button .si { width: 44px; height: 44px; } .subjbar button .sn { font-size: 17px; } }
.tbtn[hidden] { display: none !important; }
#bScope { right: 190px; bottom: calc(172px + env(safe-area-inset-bottom, 0px)); width: 64px; height: 64px; }
#bScope.on { border-color: var(--ok); color: var(--ok); background: rgba(124,200,100,.25); }
@media (max-width: 520px) { #bScope { width: 56px; height: 56px; } }
/* jt-css */
#jtOv { position: fixed; top:0;right:0;bottom:0;left:0;inset: 0; z-index: 120; overflow-y: auto; color: #eaf6ff; font-family: var(--font-body); background: #07131f; }
#jtOv[hidden] { display: none; }
#jtOv .jt-bg { position: fixed; top:0;right:0;bottom:0;left:0;inset: 0; background: radial-gradient(ellipse at 20% 0%, rgba(80,200,170,.28), transparent 55%), radial-gradient(ellipse at 90% 100%, rgba(255,190,70,.18), transparent 55%); pointer-events: none; }
#jtOv .jt-x { position: fixed; top: 12px; right: 12px; z-index: 5; background: rgba(8,20,32,.8); color: #7cf5c4; border: 1px solid rgba(124,245,196,.6); padding: 8px 16px; font: 600 14px var(--font-body); cursor: pointer; }
#jtOv .jt-wrap, #jtOv .jt-play { position: relative; max-width: 1100px; margin: 0 auto; padding: 56px 18px 40px; }
#jtOv .jt-kick { font: 700 12px var(--font-body); letter-spacing: .18em; color: #7cf5c4; }
#jtOv h1 { font: 800 clamp(30px,5vw,54px)/1.1 var(--font-display, var(--font-body)); margin: 8px 0; } #jtOv h1 em { display: block; font-style: normal; color: #ffd23d; font-size: .62em; }
#jtOv .jt-lead { opacity: .8; margin: 0 0 14px; }
#jtOv .jt-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 14px; } @media (max-width: 800px) { #jtOv .jt-grid { grid-template-columns: 1fr; } }
#jtOv .jt-card { background: rgba(12,30,46,.82); border: 1px solid rgba(124,245,196,.28); border-radius: 14px; padding: 14px; }
#jtOv .jt-card h3 { margin: 0 0 8px; font-size: 16px; color: #7cf5c4; }
#jtOv .jt-lb { display: block; font-size: 12px; opacity: .75; margin: 10px 0 4px; }
#jtOv select { width: 100%; padding: 9px; background: #0b2233; color: #eaf6ff; border: 1px solid rgba(124,245,196,.4); border-radius: 8px; font: 14px var(--font-body); }
#jtOv .jt-note { font-size: 12px; margin-top: 10px; opacity: .85; } #jtOv .jt-note.warn { color: #ff8aa0; }
#jtOv .jt-act { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; }
#jtOv .jt-go { background: linear-gradient(135deg,#7cf5c4,#38c9ff); color: #04202c; border: 0; border-radius: 10px; padding: 14px 26px; font: 800 15px var(--font-body); letter-spacing: .06em; cursor: pointer; } #jtOv .jt-go.alt { background: transparent; color: #7cf5c4; border: 1px solid #7cf5c4; } #jtOv .jt-go:disabled { opacity: .4; }
#jtOv .ar-vid { position: relative; background: #050b18; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid rgba(124,245,196,.35); border-radius: 10px; }
#jtOv .ar-vid video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); opacity: 0; } #jtOv .ar-vid.live video { opacity: .9; }
#jtOv .ar-vid canvas { position: absolute; top:0;right:0;bottom:0;left:0;inset: 0; width: 100%; height: 100%; } #jtOv .ar-vph { position: absolute; top:0;right:0;bottom:0;left:0;inset: 0; display: grid; place-items: center; text-align: center; font-size: 13px; opacity: .6; } #jtOv .ar-vid.live .ar-vph { display: none; } #jtOv .ar-vico { font-size: 38px; }
#jtOv .ar-vid.pip { position: fixed; right: 12px; bottom: 12px; width: 190px; z-index: 6; }
#jtOv .ar-camon { margin-top: 8px; background: transparent; color: #7cf5c4; border: 1px solid #7cf5c4; border-radius: 8px; padding: 8px 14px; font: 700 12px var(--font-body); cursor: pointer; }
#jtOv .ar-camst { font-size: 12px; opacity: .8; margin: 6px 0; } #jtOv .ar-camst[data-k="err"] { color: #ff8aa0; }
#jtOv .jt-hand { display: inline-block; padding: 6px 12px; border-radius: 20px; font: 700 13px var(--font-body); background: rgba(255,255,255,.08); margin: 6px 0; }
#jtOv .jt-hand[data-m="ok"] { background: rgba(124,245,196,.22); color: #7cf5c4; } #jtOv .jt-hand[data-m="palm"] { background: rgba(255,210,61,.25); color: #ffd23d; }
#jtOv .jt-tiles { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin: 10px 0; }
#jtOv .jt-tile { aspect-ratio: 1; display: grid; place-items: center; font: 800 28px var(--font-body); border-radius: 12px; background: #0e2a3f; border: 2px solid rgba(124,245,196,.3); transition: transform .15s; }
#jtOv .jt-tile.hov, #jtOv .jt-opt.hov { border-color: #7cf5c4; box-shadow: 0 0 22px rgba(124,245,196,.55); transform: scale(1.04); }
#jtOv .jt-tile.hold, #jtOv .jt-opt.hold { background: conic-gradient(#ffd23d var(--p,0deg), #0e2a3f 0); }
#jtOv .jt-tile.flick { animation: jtFlick .6s ease-out; }
#jtOv .jt-hint { font-size: 13px; color: #ffd23d; min-height: 18px; } #jtOv .jt-how { font-size: 13px; opacity: .85; padding-left: 18px; line-height: 1.5; }
#jtOv .jt-top { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
#jtOv .jt-sc { text-align: right; } #jtOv .jt-sc span { font-size: 11px; opacity: .7; margin-right: 6px; } #jtOv .jt-sc b { font-size: 26px; color: #ffd23d; } #jtOv .jt-stk { color: #7cf5c4; font-weight: 700; }
#jtOv .jt-tm { display: flex; align-items: center; gap: 10px; margin: 12px 0 6px; } #jtOv .jt-bar { flex: 1; height: 10px; background: rgba(255,255,255,.1); border-radius: 6px; overflow: hidden; } #jtOv .jt-bar i { display: block; height: 100%; width: 100%; transition: width .1s linear; } #jtOv .jt-sec { min-width: 28px; text-align: right; }
#jtOv .jt-q { font: 700 clamp(18px,2.6vw,28px)/1.35 var(--font-body); margin: 12px 0 18px; }
#jtOv .jt-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 640px) { #jtOv .jt-opts { grid-template-columns: 1fr; } }
#jtOv .jt-opt { display: flex; gap: 12px; align-items: center; text-align: left; min-height: 84px; padding: 14px; color: #eaf6ff; background: #0e2a3f; border: 2px solid rgba(124,245,196,.3); border-radius: 14px; font: 600 clamp(14px,1.9vw,19px)/1.35 var(--font-body); cursor: pointer; transition: transform .15s, box-shadow .15s; }
#jtOv .jt-opt b { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: rgba(124,245,196,.2); color: #7cf5c4; }
#jtOv .jt-opt.flick { animation: jtFlick .6s ease-in forwards; } #jtOv .jt-opt.ok { border-color: #3dffa0; background: rgba(61,255,160,.18); animation: jtPop .5s; } #jtOv .jt-opt.bad { border-color: #ff4d7d; background: rgba(255,77,125,.2); } #jtOv .jt-opt.dim { opacity: .4; }
@keyframes jtFlick { 0% { transform: translate(0,0) rotate(0) scale(1); opacity: 1; } 100% { transform: translate(var(--fx,60px),var(--fy,-120px)) rotate(var(--fr,35deg)) scale(.75); opacity: 0; } }
@keyframes jtPop { 0% { transform: scale(.9); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }
#jtOv .jt-fb { margin-top: 16px; padding: 14px; border-radius: 12px; background: rgba(12,30,46,.9); border: 1px solid; } #jtOv .jt-fb.ok { border-color: #3dffa0; } #jtOv .jt-fb.bad { border-color: #ff4d7d; }
#jtOv .jt-fb[hidden] { display: none; } #jtOv .jt-fh { font-weight: 800; font-size: 18px; } #jtOv .jt-fe { margin: 6px 0; opacity: .9; } #jtOv .jt-fhint { font-size: 12px; opacity: .7; margin-bottom: 8px; }
#jtOv .jt-next { background: #7cf5c4; color: #04202c; border: 0; border-radius: 8px; padding: 10px 18px; font: 700 14px var(--font-body); cursor: pointer; }
#jtOv .jt-cur { position: fixed; z-index: 9; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; pointer-events: none; border: 3px solid #7cf5c4; box-shadow: 0 0 18px #7cf5c4; display: grid; place-items: center; font-size: 22px; } #jtOv .jt-cur[hidden] { display: none; }
#jtOv .jt-cur[data-m="ok"]::after { content: "👌"; } #jtOv .jt-cur[data-m="palm"] { border-color: #ffd23d; box-shadow: 0 0 18px #ffd23d; } #jtOv .jt-cur[data-m="palm"]::after { content: "✋"; } #jtOv .jt-cur[data-m="mid"] { opacity: .6; }
#jtOv .jt-stars { font-size: 42px; color: #ffd23d; letter-spacing: 6px; } #jtOv .jt-sum { opacity: .85; margin-bottom: 14px; }
#jtOv .jt-rev { margin: 12px 0; background: rgba(12,30,46,.8); border-radius: 10px; padding: 10px 14px; } #jtOv .jt-rev summary { cursor: pointer; font-weight: 700; } #jtOv .jt-wq { margin: 10px 0; font-size: 14px; } #jtOv .jt-wq .a { color: #3dffa0; } #jtOv .jt-wq .who { opacity: .7; font-size: 12px; }
#jtOv .jt-camtop { margin: 0; }
#jtOv .jt-names { display: grid; gap: 6px; margin-top: 8px; } #jtOv .jt-nm { display: flex; gap: 8px; align-items: center; } #jtOv .jt-nm i { width: 12px; height: 12px; border-radius: 50%; flex: none; } #jtOv .jt-nm input { flex: 1; padding: 8px; background: #0b2233; color: #eaf6ff; border: 1px solid rgba(124,245,196,.4); border-radius: 8px; font: 14px var(--font-body); }
#jtOv .jt-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; } #jtOv .jt-chip { display: flex; gap: 8px; align-items: center; padding: 6px 12px; border-radius: 20px; border: 2px solid var(--c); background: rgba(12,30,46,.8); opacity: .55; transition: transform .2s; } #jtOv .jt-chip.on { opacity: 1; box-shadow: 0 0 14px var(--c); transform: scale(1.05); } #jtOv .jt-chip .n { font-size: 13px; } #jtOv .jt-chip .s { color: #ffd23d; } #jtOv .jt-chip.up { animation: jtPop .6s; background: rgba(61,255,160,.25); } #jtOv .jt-chip.dn { background: rgba(255,77,125,.2); }
#jtOv .jt-who { font: 800 20px var(--font-body); }
#jtOv .jt-pause { margin-left: 8px; background: transparent; color: #ffd23d; border: 1px solid #ffd23d; border-radius: 8px; padding: 10px 14px; font: 700 13px var(--font-body); cursor: pointer; }
#jtOv .jt-tb { width: 100%; border-collapse: collapse; margin: 12px 0; } #jtOv .jt-tb th { text-align: left; font-size: 12px; opacity: .7; padding: 6px; } #jtOv .jt-tb td { padding: 10px 6px; border-top: 1px solid rgba(255,255,255,.1); } #jtOv .jt-tb tr td:first-child { border-left: 4px solid var(--c, #7cf5c4); font-weight: 800; } #jtOv .jt-tb .nm { font-weight: 700; color: var(--c); }
/* /jt-css */
/* sl-css */
#slOv { position: fixed; top:0;right:0;bottom:0;left:0;inset: 0; z-index: 130; overflow: hidden; color: #f2f7fb; font-family: var(--font-body); background: #09141d; display: flex; flex-direction: column; --sl: #2f9e8f; }
#slOv[hidden] { display: none; }
#slOv .sl-bg { position: fixed; top:0;right:0;bottom:0;left:0;inset: 0; background: radial-gradient(ellipse at 15% 0%, color-mix(in srgb, var(--sl) 45%, transparent), transparent 55%), radial-gradient(ellipse at 100% 100%, rgba(255,200,80,.14), transparent 50%); pointer-events: none; }
#slOv .sl-hd { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 18px; flex-wrap: wrap; }
#slOv .sl-kick { font: 800 12px var(--font-body); letter-spacing: .16em; color: var(--sl); filter: brightness(1.5); }
#slOv .sl-tools { display: flex; gap: 8px; flex-wrap: wrap; }
#slOv .sl-x { background: rgba(8,20,32,.8); color: #ffd23d; border: 1px solid rgba(255,210,61,.55); padding: 7px 14px; font: 600 13px var(--font-body); cursor: pointer; border-radius: 6px; }
#slOv .sl-bar { position: relative; height: 4px; background: rgba(255,255,255,.1); } #slOv .sl-bar i { display: block; height: 100%; background: var(--sl); filter: brightness(1.4); transition: width .3s; }
#slOv .sl-main { position: relative; flex: 1; display: flex; align-items: center; min-height: 0; padding: 0 8px; }
#slOv .sl-nav { flex: none; width: 44px; height: 80px; background: rgba(255,255,255,.06); color: #fff; border: 0; border-radius: 10px; font-size: 34px; cursor: pointer; } #slOv .sl-nav:hover { background: rgba(255,255,255,.16); }
#slOv .sl-stage { flex: 1; min-width: 0; max-height: 100%; overflow-y: auto; padding: 18px 28px; animation: slIn .35s ease; margin: 0 auto; max-width: 1150px; }
@keyframes slIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
#slOv .sl-h { font: 800 clamp(26px,4vw,46px)/1.15 var(--font-display, var(--font-body)); margin: 0 0 18px; } #slOv .sl-h2 { font: 700 18px var(--font-body); margin: 18px 0 6px; color: #ffd23d; }
#slOv .cover { text-align: center; padding-top: 5vh; } #slOv .cover h1 { font: 800 clamp(34px,6vw,72px)/1.1 var(--font-display, var(--font-body)); margin: 14px 0; } #slOv .sl-code { display: inline-block; background: var(--sl); color: #fff; padding: 6px 16px; border-radius: 20px; font: 800 14px var(--font-body); letter-spacing: .1em; filter: brightness(1.2); }
#slOv .sl-sub { opacity: .75; font-size: 16px; } #slOv .sl-hint { margin-top: 20px; font-size: 13px; opacity: .6; } #slOv .sl-dskp { margin-top: 18px; font-size: 14px; opacity: .65; } #slOv .sl-p { font-size: 20px; opacity: .9; max-width: 760px; }
#slOv .sl-ul, #slOv .sl-ol { font-size: clamp(18px,2.6vw,28px); line-height: 1.45; padding-left: 28px; margin: 0; } #slOv .sl-ul.sm { font-size: clamp(15px,2vw,20px); } #slOv .sl-ul li, #slOv .sl-ol li { margin: 0 0 14px; } #slOv .sl-ul li::marker { color: var(--sl); filter: brightness(1.6); }
#slOv .rv { opacity: 0; transform: translateY(14px); transition: opacity .4s, transform .4s; pointer-events: none; } #slOv .rv.show { opacity: 1; transform: none; pointer-events: auto; }
#slOv .sl-q { font: 700 clamp(20px,3vw,32px)/1.35 var(--font-body); margin: 0 0 18px; } #slOv .sl-q.big { font-size: clamp(20px,2.8vw,30px); }
#slOv .sl-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 700px) { #slOv .sl-opts { grid-template-columns: 1fr; } }
#slOv .sl-opt { display: flex; gap: 12px; align-items: center; text-align: left; padding: 14px; min-height: 70px; color: #f2f7fb; background: #0f2a3d; border: 2px solid rgba(255,255,255,.2); border-radius: 12px; font: 600 clamp(15px,1.9vw,20px)/1.35 var(--font-body); cursor: pointer; } #slOv .sl-opt:hover:not(:disabled) { border-color: var(--sl); filter: brightness(1.2); }
#slOv .sl-opt b { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.14); } #slOv .sl-opt.ok { border-color: #3dffa0; background: rgba(61,255,160,.18); } #slOv .sl-opt.bad { border-color: #ff4d7d; background: rgba(255,77,125,.2); } #slOv .sl-opt.dim { opacity: .4; }
#slOv .sl-fb { margin-top: 14px; padding: 12px 14px; border-radius: 10px; border: 1px solid; font-size: 16px; } #slOv .sl-fb[hidden] { display: none; } #slOv .sl-fb.ok { border-color: #3dffa0; background: rgba(61,255,160,.1); } #slOv .sl-fb.bad { border-color: #ff4d7d; background: rgba(255,77,125,.1); }
#slOv .sl-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px,1fr)); gap: 14px; }
#slOv .sl-card { position: relative; height: 150px; perspective: 800px; cursor: pointer; } #slOv .sl-face { position: absolute; top:0;right:0;bottom:0;left:0;inset: 0; display: grid; place-items: center; padding: 12px; text-align: center; border-radius: 14px; backface-visibility: hidden; transition: transform .5s; font-size: 17px; line-height: 1.35; overflow: auto; }
#slOv .sl-face.f { background: linear-gradient(135deg, var(--sl), #0f2a3d); font-weight: 800; font-size: 20px; } #slOv .sl-face.b { background: #123a52; border: 2px solid #ffd23d; transform: rotateY(180deg); } #slOv .sl-card.flip .f { transform: rotateY(180deg); } #slOv .sl-card.flip .b { transform: rotateY(0); }
#slOv .sl-mm { display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px; align-items: center; } @media (max-width: 800px) { #slOv .sl-mm { grid-template-columns: 1fr; } }
#slOv .sl-ring { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 70px 0 10px; } #slOv .sl-core { position: absolute; top: 0; left: 50%; transform: translateX(-50%); background: var(--sl); color: #fff; padding: 12px 22px; border-radius: 40px; font-weight: 800; font-size: 18px; text-align: center; max-width: 90%; filter: brightness(1.25); }
#slOv .sl-node { padding: 12px; color: #f2f7fb; background: #0f2a3d; border: 2px solid rgba(255,255,255,.2); border-radius: 12px; font: 600 15px/1.3 var(--font-body); cursor: pointer; text-align: left; } #slOv .sl-node.on { border-color: #ffd23d; background: #173f58; }
#slOv .sl-mmd { background: rgba(15,42,61,.85); border-left: 4px solid #ffd23d; border-radius: 10px; padding: 18px; font-size: 19px; line-height: 1.5; min-height: 120px; }
#slOv .sl-timer { display: flex; align-items: center; gap: 10px; margin: 16px 0; flex-wrap: wrap; } #slOv .sl-td { font: 800 30px var(--font-body); min-width: 90px; color: #ffd23d; } #slOv .sl-td.low { color: #ff4d7d; }
#slOv .sl-btn { background: var(--sl); color: #fff; border: 0; border-radius: 8px; padding: 9px 18px; font: 700 14px var(--font-body); cursor: pointer; filter: brightness(1.25); } #slOv .sl-btn.alt { background: transparent; border: 1px solid #ffd23d; color: #ffd23d; filter: none; } #slOv .sl-btn.big { padding: 16px 26px; font-size: 17px; }
#slOv .sl-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
#slOv .sl-lv { display: inline-block; background: #ffd23d; color: #2a1d00; padding: 5px 14px; border-radius: 20px; font: 800 13px var(--font-body); margin-bottom: 12px; }
#slOv .sl-notes { position: relative; margin: 0 18px 6px; padding: 10px 14px; background: rgba(255,210,61,.12); border: 1px dashed #ffd23d; border-radius: 8px; font-size: 14px; }
#slOv .sl-ft { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 8px 18px 12px; font-size: 12px; opacity: .85; gap: 10px; flex-wrap: wrap; } #slOv .sl-dots { display: flex; gap: 6px; flex-wrap: wrap; } #slOv .sl-dot { width: 10px; height: 10px; border-radius: 50%; border: 0; background: rgba(255,255,255,.25); cursor: pointer; padding: 0; } #slOv .sl-dot.on { background: var(--sl); filter: brightness(1.6); transform: scale(1.3); }
#slOv .sl-idx { position: fixed; right: 12px; top: 56px; width: 340px; max-width: 92vw; max-height: 75vh; overflow-y: auto; background: #0c2132; border: 1px solid rgba(255,255,255,.2); border-radius: 12px; padding: 12px; z-index: 6; } #slOv .sl-idx h3 { margin: 0 0 8px; font-size: 15px; } #slOv .sl-ix { display: block; width: 100%; text-align: left; background: transparent; color: #f2f7fb; border: 0; padding: 8px; border-radius: 6px; font: 13px var(--font-body); cursor: pointer; } #slOv .sl-ix:hover, #slOv .sl-ix.on { background: rgba(255,255,255,.12); }
#slOv .sl-pk { position: relative; max-width: 900px; margin: 0 auto; padding: 56px 18px 30px; overflow-y: auto; height: 100%; width: 100%; box-sizing: border-box; } #slOv .sl-pk h1 { font: 800 clamp(26px,4vw,44px)/1.15 var(--font-display, var(--font-body)); margin: 6px 0 8px; }
#slOv .sl-search { width: 100%; box-sizing: border-box; padding: 12px; margin: 10px 0; background: #0b2233; color: #fff; border: 1px solid rgba(255,255,255,.3); border-radius: 8px; font: 15px var(--font-body); } #slOv .sl-pl h4 { margin: 18px 0 8px; display: flex; align-items: center; gap: 8px; font-size: 14px; } #slOv .sl-pl h4 i { width: 12px; height: 12px; border-radius: 50%; }
#slOv .sl-pi { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; padding: 12px; margin-bottom: 6px; background: #0f2a3d; color: #f2f7fb; border: 1px solid rgba(255,255,255,.15); border-radius: 10px; font: 600 15px var(--font-body); cursor: pointer; } #slOv .sl-pi:hover { border-color: #ffd23d; } #slOv .sl-pi .c { flex: none; min-width: 42px; text-align: center; padding: 4px 8px; border-radius: 6px; color: #fff; font-weight: 800; font-size: 13px; }
#slOv .sl-notes[hidden] { display: none; }
/* /sl-css */
/* Slaid PdPc v17.64: gaya 3D Clay Anime */
#slOv { --clay: inset 0 -8px 0 rgba(59,42,90,.10), inset 0 6px 0 rgba(255,255,255,.8), 0 14px 22px rgba(59,42,90,.16); background: #FFF4E4; color: #3B2A5A; font-family: "Nunito", var(--font-body), system-ui, sans-serif; }
#slOv .sl-bg { background: radial-gradient(circle at 6% 8%, rgba(255,201,77,.38), transparent 36%), radial-gradient(circle at 96% 92%, rgba(255,122,138,.30), transparent 42%), radial-gradient(circle at 94% 6%, rgba(91,184,245,.30), transparent 34%), radial-gradient(circle at 4% 96%, rgba(111,214,176,.30), transparent 34%); }
#slOv .sl-kick { color: #B02F4C; filter: none; font: 800 13px "Nunito", var(--font-body); letter-spacing: .14em; }
#slOv .sl-x { background: #fff; color: #3B2A5A; border: 0; border-radius: 999px; padding: 8px 16px; font: 800 13px "Nunito", var(--font-body); box-shadow: var(--clay); }
#slOv .sl-bar { height: 8px; background: rgba(59,42,90,.12); margin: 0 18px; border-radius: 8px; overflow: hidden; } #slOv .sl-bar i { background: linear-gradient(90deg, #FF7A8A, #FFC94D); filter: none; border-radius: 8px; }
#slOv .sl-nav { background: #fff; color: #3B2A5A; box-shadow: var(--clay); border-radius: 28px; } #slOv .sl-nav:hover { background: #FFF0C2; }
#slOv .sl-stage { max-width: 1240px; }
#slOv .sl-h { font: 600 clamp(28px,4.2vw,50px)/1.12 "Fredoka", var(--font-display, var(--font-body)); color: #3B2A5A; } #slOv .sl-h2 { font: 600 22px "Fredoka", var(--font-body); color: #B02F4C; }
#slOv .cover { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; text-align: left; padding-top: 2vh; } #slOv .sl-cv { flex: 1 1 420px; min-width: 0; } #slOv .sl-mas { flex: 0 1 380px; text-align: center; }
#slOv .cover h1 { font: 600 clamp(34px,5.6vw,68px)/1.08 "Fredoka", var(--font-display, var(--font-body)); color: #3B2A5A; margin: 14px 0; }
#slOv .sl-code { background: #FFC94D; color: #3B2A5A; filter: none; box-shadow: var(--clay); font: 800 14px "Nunito", var(--font-body); }
#slOv .sl-sub { color: #5A4A78; opacity: 1; } #slOv .sl-hint { color: #6B5A8A; opacity: 1; } #slOv .sl-dskp { color: #6B5A8A; opacity: 1; } #slOv .sl-p { color: #3B2A5A; opacity: 1; }
#slOv .sl-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; } #slOv .sl-chip { background: var(--bg); color: #3B2A5A; padding: 7px 16px; border-radius: 999px; font: 800 14px "Nunito", var(--font-body); box-shadow: var(--clay); }
/* kad tanah liat */
#slOv .sl-stack { display: grid; gap: 14px; } #slOv .sl-stack.sm .sl-ct { font-size: clamp(15px,1.9vw,19px); }
#slOv .sl-cl { display: flex; gap: 16px; align-items: center; background: var(--bg); border-radius: 32px; padding: 16px 22px; box-shadow: var(--clay); } #slOv .sl-cl.rv { transition: opacity .4s, transform .4s; }
#slOv .sl-bd { flex: none; width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 30% 25%, var(--c1), var(--c2)); color: #3B2A5A; font: 700 26px "Fredoka", var(--font-body); box-shadow: inset 0 -6px 0 rgba(59,42,90,.14), 0 8px 12px rgba(59,42,90,.18); }
#slOv .sl-ct { font-size: clamp(17px,2.2vw,26px); line-height: 1.4; font-weight: 600; } #slOv .sl-ct.big { font-size: clamp(18px,2.5vw,29px); font-weight: 700; }
#slOv .sl-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 16px; } #slOv .sl-info .sl-cl { align-items: flex-start; } #slOv .sl-tx b { display: block; font: 600 clamp(17px,1.9vw,22px)/1.25 "Fredoka", var(--font-body); margin-bottom: 4px; } #slOv .sl-tx p { margin: 0; font-size: clamp(14px,1.4vw,16px); line-height: 1.45; color: #4A3A68; }
#slOv .sl-hub { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: #3B2A5A; color: #FFF4E4; border-radius: 40px; padding: 14px 26px; margin: 0 0 16px; box-shadow: inset 0 -8px 0 rgba(0,0,0,.2), inset 0 6px 0 rgba(255,255,255,.16), 0 14px 22px rgba(59,42,90,.25); } #slOv .sl-hub b { font: 600 clamp(18px,2.4vw,28px) "Fredoka", var(--font-body); flex: 1 1 200px; } #slOv .sl-hub .sl-hk { background: #FFC94D; color: #3B2A5A; border-radius: 999px; padding: 4px 14px; font: 800 12px "Nunito", var(--font-body); letter-spacing: .12em; } #slOv .sl-hub small { color: #C9BEE0; font-size: 14px; }
#slOv .sl-flow { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; } #slOv .sl-fs { flex: 1 1 190px; display: flex; flex-direction: column; gap: 10px; background: var(--bg); border-radius: 30px; padding: 18px; box-shadow: var(--clay); font-size: clamp(14px,1.6vw,18px); line-height: 1.4; font-weight: 600; } #slOv .sl-ar { align-self: center; font: 700 44px "Fredoka", var(--font-body); color: #B02F4C; }
@media (max-width: 700px) { #slOv .sl-ar { display: none; } #slOv .sl-cl { padding: 12px 14px; border-radius: 26px; } #slOv .sl-bd { width: 42px; height: 42px; font-size: 20px; } }
/* kuiz */
#slOv .sl-opt { background: #fff; color: #3B2A5A; border: 3px solid transparent; border-radius: 28px; box-shadow: var(--clay); font-family: "Nunito", var(--font-body); font-weight: 700; } #slOv .sl-opt:hover:not(:disabled) { border-color: #FFC94D; filter: none; } #slOv .sl-opt b { background: #FFE9CF; color: #3B2A5A; } #slOv .sl-opt.ok { border-color: #2FAE7A; background: #DFF7EC; } #slOv .sl-opt.bad { border-color: #E25570; background: #FFE3E6; } #slOv .sl-opt.dim { opacity: .5; }
#slOv .sl-fb { background: #fff; border: 0; border-radius: 26px; box-shadow: var(--clay); color: #3B2A5A; } #slOv .sl-fb.ok { background: #DFF7EC; } #slOv .sl-fb.bad { background: #FFE3E6; }
#slOv .sl-q { font-family: "Fredoka", var(--font-body); font-weight: 500; color: #3B2A5A; }
/* kad istilah */
#slOv .sl-card { height: 170px; } #slOv .sl-face { border-radius: 32px; box-shadow: var(--clay); color: #3B2A5A; font-weight: 700; } #slOv .sl-face.f { background: radial-gradient(circle at 30% 25%, var(--c1), var(--c2)); font: 600 22px "Fredoka", var(--font-body); } #slOv .sl-face.b { background: #fff; border: 4px solid var(--c2); }
/* peta minda */
#slOv .sl-core { background: #FF7A8A; color: #3B2A5A; filter: none; box-shadow: var(--clay); font-family: "Fredoka", var(--font-body); font-weight: 600; } #slOv .sl-node { background: var(--bg); color: #3B2A5A; border: 3px solid transparent; border-radius: 26px; box-shadow: var(--clay); font-family: "Nunito", var(--font-body); font-weight: 700; } #slOv .sl-node.on { border-color: #3B2A5A; background: #fff; } #slOv .sl-mmd { background: #fff; color: #3B2A5A; border: 0; border-left: 10px solid #FFC94D; border-radius: 28px; box-shadow: var(--clay); }
/* alat */
#slOv .sl-td { color: #B02F4C; } #slOv .sl-td.low { color: #D6204A; } #slOv .sl-timer span { font-weight: 700; color: #6B5A8A; }
#slOv .sl-btn { background: #FF7A8A; color: #3B2A5A; filter: none; border-radius: 999px; box-shadow: var(--clay); font-family: "Nunito", var(--font-body); font-weight: 800; } #slOv .sl-btn:hover { background: #FF93A0; } #slOv .sl-btn.alt { background: #fff; border: 0; color: #3B2A5A; }
#slOv .sl-lv { background: #6FD6B0; color: #3B2A5A; box-shadow: var(--clay); }
#slOv .sl-notes { background: #FFF0C2; color: #3B2A5A; border: 2px dashed #F5A81C; border-radius: 20px; }
#slOv .sl-ft { color: #5A4A78; opacity: 1; } #slOv .sl-dot { background: rgba(59,42,90,.22); } #slOv .sl-dot.on { background: #FF7A8A; }
#slOv .sl-idx { background: #fff; color: #3B2A5A; border: 0; border-radius: 28px; box-shadow: var(--clay); } #slOv .sl-ix { color: #3B2A5A; } #slOv .sl-ix.on { background: #FFF0C2; }
#slOv .sl-search { background: #fff; color: #3B2A5A; border: 0; border-radius: 999px; box-shadow: var(--clay); padding: 12px 20px; } #slOv .sl-pi { background: #fff; color: #3B2A5A; border: 0; border-radius: 24px; box-shadow: var(--clay); } #slOv .sl-pi:hover { background: #FFF0C2; }
#slOv .sl-pk h1 { font: 600 clamp(28px,4vw,46px)/1.12 "Fredoka", var(--font-body); color: #3B2A5A; } #slOv .sl-pl h4 { color: #3B2A5A; }
.sl-pick{position:relative;z-index:2;max-width:980px;margin:0 auto;padding:70px 22px 40px;color:#3B2A5A;overflow-y:auto;max-height:100%}
.sl-pick .sl-kick{font-weight:800;letter-spacing:.2em;font-size:12px;color:#B02F4C} .sl-pick h2{font-family:Fredoka,Nunito,system-ui,sans-serif;font-size:clamp(26px,5vw,44px);margin:6px 0 8px;line-height:1.1}
.sl-pk-lead{margin:0 0 18px;font-size:16px}
.sl-pk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.sl-pk-card{display:flex;flex-direction:column;gap:8px;text-align:left;padding:20px;border:0;border-radius:32px;background:#fff;color:#3B2A5A;font:600 16px Nunito,system-ui,sans-serif;cursor:pointer;box-shadow:inset 0 -10px 0 rgba(59,42,90,.09),inset 0 8px 0 rgba(255,255,255,.8),0 16px 22px rgba(59,42,90,.16);border-top:8px solid var(--c)}
.sl-pk-card b{font-family:Fredoka,Nunito,system-ui,sans-serif;font-size:24px} .sl-pk-card small{opacity:.7} .sl-pk-card ul{margin:0;padding-left:20px;display:grid;gap:6px;flex:1;font-size:15px;line-height:1.4}
.sl-pk-go{align-self:flex-start;margin-top:6px;padding:10px 20px;border-radius:999px;background:var(--c);font-weight:800;box-shadow:inset 0 -4px 0 rgba(0,0,0,.15)} .sl-pk-card:hover{transform:translateY(-3px)} .sl-pk-card:focus-visible{outline:3px solid #3B2A5A;outline-offset:3px}
#hjOv .hj-done{font-size:14px!important;color:#9fe8c8!important}
#v-prak .pr-hero{margin:10px 0 12px}
#v-prak .sm-sec{margin:10px 0 22px;border-radius:26px;overflow:hidden;background:#fdf6e6;border:3px solid #e9d3a6;box-shadow:0 10px 24px rgba(0,0,0,.28);color:#1d2b4f}
#v-prak .sm-hd{display:flex;align-items:center;gap:14px;padding:16px 22px;background:linear-gradient(180deg,#3f7ad3,#2a5bb3);border-bottom:5px solid #f2c94c} #v-prak .sm-hd h3{margin:0;color:#fff;font:800 clamp(22px,3.4vw,32px) var(--font-display,var(--font-body,system-ui));letter-spacing:.01em}
#v-prak .sm-hi{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:30px;background:#fff7e0;border:3px solid #f2c94c;box-shadow:0 3px 0 rgba(0,0,0,.18)}
#v-prak .sm-bd{padding:18px clamp(12px,3vw,26px) 22px} #v-prak .sm-lead{margin:0 0 16px;font-size:15px;line-height:1.6;color:#1d2b4f;font-weight:600}
#v-prak .sm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
#v-prak .sm-card{position:relative;display:flex;flex-direction:column;gap:8px;padding:20px 18px 18px;border-radius:22px;background:#fff;border:3px solid #ead7b0;border-top:7px solid var(--c);box-shadow:0 5px 0 #e6d2a8,0 10px 18px rgba(80,60,20,.12)}
#v-prak .sm-ico{font-size:46px;line-height:1;height:54px;display:flex;align-items:center;filter:drop-shadow(0 3px 2px rgba(0,0,0,.18))}
#v-prak .sm-card h4{margin:2px 0 0;font:800 22px var(--font-display,var(--font-body,system-ui));color:#1d2b4f} #v-prak .sm-card p{margin:0;font-size:15px;line-height:1.55;color:#5a5f6e;flex:1}
#v-prak .sm-bar{height:12px;border-radius:99px;background:#efe3c8;overflow:hidden;margin-top:8px} #v-prak .sm-bar i{display:block;height:100%;border-radius:99px;background:var(--c);transition:width .4s}
#v-prak .sm-meta{display:flex;justify-content:space-between;gap:8px;font-size:15px;color:#1d2b4f}
#v-prak .sm-go{margin-top:6px;min-height:50px;border:0;border-radius:16px;background:linear-gradient(180deg,#4d86e0,#2c5fb8);color:#fff;font:800 16px var(--font-body,system-ui);letter-spacing:.1em;cursor:pointer;box-shadow:0 5px 0 #1d3f7e,0 8px 14px rgba(0,0,0,.18)} #v-prak .sm-go:hover{filter:brightness(1.08)} #v-prak .sm-go:active{transform:translateY(3px);box-shadow:0 2px 0 #1d3f7e}
#v-prak .sm-tip{margin-top:16px;padding:12px 14px;border-radius:14px;background:#fff3cf;border:2px dashed #e3b84a;font-size:14px;line-height:1.5;color:#3b3220}
#hjOv .hj-fk{text-align:left;margin:8px 0 12px;padding-left:20px;line-height:1.55} #hjOv .hj-fk li{margin:4px 0}
#hjOv .hj-note{max-width:520px;font-size:13px;background:rgba(255,210,61,.12);border:1px solid rgba(255,210,61,.5);border-radius:10px;padding:8px 12px;margin:2px 0}
@media (pointer:coarse){#hjOv .hj-x{top:calc(env(safe-area-inset-top,0px) + 14px)}#hjOv .hj-hud{top:calc(env(safe-area-inset-top,0px) + 14px)}#hjOv .hj-obj{top:calc(env(safe-area-inset-top,0px) + 74px)}#hjOv .hj-toast{top:calc(env(safe-area-inset-top,0px) + 132px)}}
#hjOv .hj-menu .seg button{min-height:44px;cursor:pointer}
.pin-tip { position: fixed; z-index: 600; max-width: 280px; pointer-events: none; padding: 9px 12px 9px 14px; background: #101a12; color: #f4eed8; border: 1px solid color-mix(in srgb, var(--c, #f4ab3a) 70%, transparent); border-left: 5px solid var(--c, #f4ab3a); border-radius: 6px; box-shadow: 0 8px 20px rgba(0,0,0,.55); display: grid; gap: 2px; }
.pin-tip small { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--c, #f4ab3a); }
.pin-tip b { font-size: 15px; line-height: 1.25; } .pin-tip span { font-size: 12px; opacity: .75; } .pin-tip em { font-style: normal; color: #f4ab3a; letter-spacing: .1em; }
.pin-tip[hidden] { display: none; }
/* ===== v17.75: tema futuristik dan gamifikasi, susun atur minimalis ===== */
:root{--bg:#050816;--bg2:#0c1330;--bg3:#141d45;--panel:rgba(12,19,48,.78);--line:rgba(120,190,255,.2);--line2:rgba(110,230,255,.55);--ink:#eef3ff;--muted:#93a3cc;--olive:#2f6bff;--olive2:#5b8dff;--khaki:#7be7ff;--amber:#ffd23d;--danger:#ff5b7a;--ok:#4dffb2;--sea:#050818;--land:#17307a;--land-hi:#2a4bb8;--neon:#29e6ff;--neon2:#9b6bff;--neon3:#ff4fd8;--lime:#b8ff3d;--font-display:"Orbitron","Rajdhani","Eurostile","Segoe UI",system-ui,sans-serif;--font-body:"Rajdhani","Segoe UI",system-ui,-apple-system,sans-serif;--font-util:"Rajdhani","Segoe UI",system-ui,sans-serif}
body{background:radial-gradient(900px 500px at 12% -10%,rgba(155,107,255,.28),transparent 60%),radial-gradient(900px 520px at 100% 0%,rgba(41,230,255,.18),transparent 60%),linear-gradient(rgba(120,190,255,.045) 1px,transparent 1px) 0 0/44px 44px,linear-gradient(90deg,rgba(120,190,255,.045) 1px,transparent 1px) 0 0/44px 44px,var(--bg)!important;color:var(--ink)}
.top{background:rgba(6,10,28,.82)!important;backdrop-filter:blur(10px);border-bottom:1px solid var(--line)!important;box-shadow:0 1px 0 rgba(41,230,255,.25),0 8px 30px rgba(0,0,0,.35)}
.top-in{flex-wrap:nowrap!important;gap:10px 14px!important;padding:8px 14px!important}
.brand{font-family:var(--font-display)!important;font-size:21px!important;letter-spacing:.14em!important;background:linear-gradient(90deg,var(--neon),var(--neon2) 60%,var(--neon3));-webkit-background-clip:text;background-clip:text;color:transparent!important;text-transform:uppercase;cursor:pointer;margin-right:auto}
.brand small{-webkit-text-fill-color:var(--muted);font-size:10px!important;letter-spacing:.2em!important;font-family:var(--font-util)!important}
.meb{border-radius:999px!important;background:linear-gradient(180deg,rgba(41,230,255,.12),rgba(155,107,255,.1))!important;border:1px solid var(--line2)!important;box-shadow:0 0 18px rgba(41,230,255,.15)}
.meb:hover{box-shadow:0 0 22px rgba(41,230,255,.4)}
.me-n{font-family:var(--font-display)!important;font-size:12px!important;letter-spacing:.1em!important}
.xpbar{border-radius:99px;overflow:hidden;background:rgba(255,255,255,.12)!important}.xpbar i{background:linear-gradient(90deg,var(--neon),var(--lime))!important;box-shadow:0 0 10px var(--neon)}
.wallet{border-radius:999px!important;pointer-events:none;cursor:default;background:linear-gradient(180deg,rgba(255,210,61,.16),rgba(255,210,61,.05))!important;border:1px solid rgba(255,210,61,.55)!important;color:#ffe27a!important;font-size:18px!important}
.wallet .wc{width:28px;height:28px}
.tabs{display:none!important}
.sjm{position:relative}
.sjm>button{display:flex;align-items:center;gap:8px;min-height:44px;padding:4px 12px;border-radius:999px;border:1px solid var(--line2);background:rgba(41,230,255,.08);color:var(--ink);font:700 13px var(--font-body);cursor:pointer}
.sjm>button b{font-family:var(--font-display);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--neon)}
.sjm>button .sjm-l{opacity:.6;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.sjm-pop{position:absolute;right:0;top:calc(100% + 8px);z-index:70;min-width:230px;max-height:70vh;overflow:auto;padding:6px;border-radius:16px;background:rgba(8,13,36,.97);border:1px solid var(--line2);box-shadow:0 18px 50px rgba(0,0,0,.6),0 0 30px rgba(41,230,255,.2)}
.sjm-pop button{display:block;width:100%;text-align:left;min-height:44px;padding:8px 12px;border:0;border-radius:10px;background:transparent;color:var(--ink);font:700 15px var(--font-body);cursor:pointer}
.sjm-pop button:hover,.sjm-pop button:focus-visible{background:rgba(41,230,255,.14);outline:none}
.sjm-pop button[aria-checked=true]{color:var(--neon);background:rgba(41,230,255,.1)}
.sjm-pop button[aria-checked=true]::after{content:" ●";font-size:10px}
#backBar{max-width:1600px;margin:0 auto;padding:10px 16px 0}
#backBar .btn{min-height:44px}
.wrap{padding-block:12px 120px!important}
/* peta sahaja */
#v-map>.sec,#v-map>.lead,#legend,#tlist,#homeBar,#subjBar{display:none!important}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mapstage{position:relative}
.maps{gap:14px!important}
.mapbox{border-radius:20px!important;border:1px solid var(--line2)!important;background:radial-gradient(ellipse at 28% 18%,rgba(41,230,255,.2),transparent 58%),radial-gradient(ellipse at 85% 100%,rgba(155,107,255,.2),transparent 60%),linear-gradient(rgba(120,190,255,.07) 1px,transparent 1px) 0 0/28px 28px,linear-gradient(90deg,rgba(120,190,255,.07) 1px,transparent 1px) 0 0/28px 28px,#070c25!important;box-shadow:0 0 0 1px rgba(255,255,255,.03) inset,0 20px 50px rgba(0,0,0,.45),0 0 40px rgba(41,230,255,.08)}
.mapbox h3{color:var(--neon)!important;font-family:var(--font-display)!important;font-size:11px!important;letter-spacing:.2em!important}
.mapbox svg{max-height:min(60vh,620px)!important}
body.mapbig .mapbox svg{max-height:none!important}
body.mapbig .maps{grid-template-columns:minmax(0,1fr)!important}
.st{fill:#13286b!important;stroke:rgba(110,230,255,.75)!important;stroke-width:.6!important}
.st.part{fill:#1d44b0!important}.st.cap{fill:#12827f!important}
.st.gold{fill:#7b5cff!important;stroke:#d9ccff!important;filter:drop-shadow(0 0 4px rgba(155,107,255,.95))!important}
.mapbox .pin{filter:drop-shadow(0 0 3px rgba(41,230,255,.55))}
.mapbox .pin.sel{filter:drop-shadow(0 0 7px #fff) drop-shadow(0 0 12px var(--neon))}
.pin:focus-visible{outline:none}.pin:focus-visible polygon{stroke:#fff!important;stroke-width:3!important}
.mapbox .sealbl{fill:rgba(150,200,255,.35)!important}
.mapctl{position:absolute;right:10px;bottom:10px;z-index:6;display:grid;gap:8px;justify-items:end}
.mapctl button{width:44px;height:44px;border-radius:14px;border:1px solid var(--line2);background:rgba(8,13,36,.88);color:var(--neon);font:800 18px var(--font-body);cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,.45);backdrop-filter:blur(6px)}
.mapctl button:hover,.mapctl button:focus-visible{background:rgba(41,230,255,.2);outline:none;box-shadow:0 0 18px rgba(41,230,255,.5)}
.dpad{display:grid;grid-template-columns:repeat(3,44px);grid-template-rows:repeat(2,44px);gap:6px}
.dpad .u{grid-column:2}.dpad .l{grid-column:1;grid-row:2}.dpad .d{grid-column:2;grid-row:2}.dpad .r{grid-column:3;grid-row:2}
@media(pointer:fine) and (min-width:1000px){.dpad{display:none}}
/* menu permainan di bawah peta */
.dock{position:sticky;bottom:calc(8px + env(safe-area-inset-bottom,0px));z-index:25;margin-top:14px}
.panel{position:static!important;transform:none!important;max-height:none!important;overflow:visible!important;border-radius:22px!important;padding:12px 14px!important;gap:6px!important;background:rgba(8,13,36,.9)!important;backdrop-filter:blur(12px);border:1px solid var(--line2)!important;box-shadow:0 -10px 40px rgba(0,0,0,.5),0 0 30px rgba(41,230,255,.12)}
.panel .sheetx,.panel .std,.panel details,.panel>.muted,.panel>.row:not(.modegrid):not(.mgrow){display:none!important}
.panel .tagline{color:var(--neon)!important;font-family:var(--font-display)!important;font-size:10px!important;letter-spacing:.2em!important;margin:0}
.panel h3{font-family:var(--font-display)!important;font-size:16px!important;line-height:1.25;letter-spacing:.04em;margin:0}
.panel .starrow{font-size:16px;letter-spacing:2px}
.panel .row{position:static!important;padding:0!important;background:none!important}
.panel .modegrid,.panel .mgrow{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto;gap:8px!important;padding:4px 2px 6px!important;scrollbar-width:thin;margin-top:2px}
.panel .btn.mode{flex:0 0 auto;grid-column:auto!important;min-height:48px!important;font-size:13px!important;padding:6px 14px 6px 6px!important;border-radius:999px!important}
.panel .btn.mode .mi{width:34px;height:34px}
.panel .btn.mode .mi svg{width:22px;height:22px}
.modegrid .m-tm{font-size:13px!important}
.btn{border-radius:999px!important;font-family:var(--font-body)!important;letter-spacing:.06em}
.btn:not(.alt):not(.mode){background:linear-gradient(135deg,var(--neon2),var(--olive))!important;color:#fff!important;border:0!important;box-shadow:0 0 18px rgba(91,141,255,.45)}
.btn.alt:not(.mode){color:var(--neon)!important;border:1px solid var(--line2)!important;background:rgba(41,230,255,.06)!important}
.btn.alt:not(.mode):hover{background:rgba(41,230,255,.16)!important}
.mnmore{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:10px}
.mnmore button{min-height:44px;padding:6px 16px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--muted);font:700 13px var(--font-body);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.mnmore button:hover,.mnmore button:focus-visible{color:var(--neon);border-color:var(--line2);outline:none;background:rgba(41,230,255,.08)}
/* butang terapung tidak bertindih */
#fabDock{position:fixed;left:max(10px,env(safe-area-inset-left));bottom:max(14px,env(safe-area-inset-bottom));z-index:60;display:flex;flex-direction:column-reverse;gap:10px;align-items:flex-start}
body.vmap #fabDock{bottom:calc(210px + env(safe-area-inset-bottom,0px))}
body.ingame #fabDock,body.ar-lock #fabDock{display:none}
#fabDock>button{position:static!important;top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;inset:auto!important;width:44px!important;height:44px!important;min-width:44px;padding:0!important;border-radius:50%!important;display:grid!important;place-items:center;font-size:15px!important;line-height:1;margin:0!important;background:rgba(8,13,36,.92)!important;color:var(--neon)!important;border:1px solid var(--line2)!important;box-shadow:0 6px 16px rgba(0,0,0,.5)!important;animation:none!important;font-family:var(--font-display)!important;font-weight:800;cursor:pointer}
#fabDock>button:hover,#fabDock>button:focus-visible{background:rgba(41,230,255,.2)!important;outline:none;box-shadow:0 0 18px rgba(41,230,255,.5)!important}
#fabDock #cnFab b,#fabDock #kmFab>span{display:none!important}
#fabDock #kmFab{font-size:0!important}#fabDock #kmFab svg{width:22px;height:22px}
#fabDock #cnFab>span{font-size:20px}
/* kad dan seksyen lain */
.hcard,.card,.mcard,.notice{border-radius:18px!important}
.card,.hcard{background:var(--panel)!important;border:1px solid var(--line)!important}
.sec{font-family:var(--font-display)!important;letter-spacing:.06em;background:linear-gradient(90deg,var(--neon),var(--neon2));-webkit-background-clip:text;background-clip:text;color:transparent}
.seg{border-radius:999px!important;overflow:hidden;border:1px solid var(--line2)!important}
.seg button{color:var(--muted)!important}.seg button[aria-pressed=true]{background:linear-gradient(135deg,var(--neon),var(--neon2))!important;color:#050816!important}
.pin-tip{border-radius:14px!important;background:rgba(8,13,36,.96)!important;color:var(--ink)!important;box-shadow:0 10px 30px rgba(0,0,0,.55),0 0 20px rgba(41,230,255,.25)}
#tcOv .tc{display:grid;gap:10px;margin:12px 0}
#tcOv .tc button{display:grid;gap:2px;text-align:left;min-height:56px;padding:10px 16px;border-radius:16px;border:1px solid var(--line2);background:rgba(41,230,255,.07);color:var(--ink);cursor:pointer;font:700 17px var(--font-body)}
#tcOv .tc button small{font-weight:500;font-size:13px;color:var(--muted)}
#tcOv .tc button:hover,#tcOv .tc button:focus-visible{background:rgba(41,230,255,.18);outline:none;box-shadow:0 0 20px rgba(41,230,255,.35)}
@media(max-width:700px){.brand{font-size:16px!important}.brand small{display:none}.meb .me-r,.xpbar{display:none}.top-in{gap:8px!important}.sjm>button .sjm-l{display:none}.mapctl{right:6px;bottom:6px}.panel h3{font-size:14px!important}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
#fabDock>button[hidden]{display:none!important}
body.vmap #fabDock{bottom:calc(var(--dockh,190px) + 26px + env(safe-area-inset-bottom,0px))}
.panel>.notice,.panel>.row:not(.modegrid){display:none!important}
.panel .emp{display:block!important;margin:0;color:var(--muted);font-size:14px}
.panel .tagline:first-child{margin-bottom:0}
.btn.m-pr{--c:#2fd6a5}
#tcOv{position:fixed;top:0;right:0;bottom:0;left:0;inset:0;z-index:320;display:grid;place-items:center;padding:16px;background:rgba(2,5,16,.72);backdrop-filter:blur(6px)}
#tcOv .box{width:min(420px,100%);padding:18px;border-radius:22px;background:rgba(10,16,42,.97);border:1px solid var(--line2);box-shadow:0 24px 70px rgba(0,0,0,.65),0 0 40px rgba(41,230,255,.2)}
#tcOv h3{margin:0;font-family:var(--font-display);font-size:16px;letter-spacing:.06em}
#tcOv .tagline{color:var(--neon);font-size:11px;letter-spacing:.2em;font-family:var(--font-display);margin-bottom:4px}

.mapctl{position:fixed!important;right:max(10px,env(safe-area-inset-right));bottom:calc(var(--dockh,190px) + 24px + env(safe-area-inset-bottom,0px));z-index:30}
#fabDock>button{min-height:44px!important;max-height:44px;max-width:44px;box-sizing:border-box}
.dock{padding-top:6px}
@media(max-width:700px){.meb .me-t{display:none}.meb{padding:4px!important}.panel .tagline{display:none}.panel h3{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wrap{padding-inline:10px!important}}
/* ===== v17.76: Gudang avatar 2D + Kolam Ikan ===== */
.wallet{pointer-events:auto!important;cursor:pointer!important}
.wallet:hover{box-shadow:0 0 22px rgba(255,210,61,.5)!important}
.zvpv .zv3d{width:100%;height:auto;display:block;touch-action:none;cursor:grab;border-radius:14px;background:radial-gradient(circle at 50% 35%,rgba(90,209,255,.18),transparent 70%)}button.zvmini{border:0;background:none;padding:0;cursor:pointer;color:inherit}.zvfx{display:grid;place-items:center;width:78px;height:98px;font-size:40px}
.kelas-chips{display:flex;flex-wrap:wrap;gap:6px}.kelas-chip{min-height:36px;padding:4px 12px;border-radius:999px;border:1px solid var(--line2,#2a5a82);background:rgba(41,230,255,.06);color:inherit;font:700 13px var(--font-body,sans-serif);cursor:pointer}.kelas-chip.on{background:var(--neon,#29e6ff);color:#04121c;border-color:transparent}
.mnmore button.hot{color:var(--neon);border-color:var(--line2);background:rgba(41,230,255,.1)}
.mnmore #dmBtn{flex-basis:100%;max-width:420px;min-height:52px;font-size:15px;color:#2b1900;border:0;background:linear-gradient(90deg,#ffd45a,#6fe0a6 55%,#5ad1ff);box-shadow:0 0 0 1px rgba(255,255,255,.25),0 6px 22px rgba(90,209,255,.35);letter-spacing:.06em}
.mnmore #dmBtn:hover,.mnmore #dmBtn:focus-visible{color:#000;filter:brightness(1.08)}
.mapav1{transform-box:fill-box;transform-origin:50% 100%;animation:avpop .55s cubic-bezier(.2,1.7,.4,1) both}
.mapav2{transform-box:fill-box;transform-origin:50% 100%;animation:avbob 1.9s ease-in-out .6s infinite}
@keyframes avpop{0%{transform:scale(0) translateY(10px);opacity:0}60%{opacity:1}100%{transform:scale(1) translateY(0);opacity:1}}
@keyframes avbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.6px)}}
@media(prefers-reduced-motion:reduce){.mapav1,.mapav2{animation:none}}
/* gudang avatar */
#v-gudang .zvfirst{max-width:560px;margin:10px auto;text-align:center;padding:20px;border-radius:22px;background:var(--panel);border:1px solid var(--line2)}
.zvpicks{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.zvpick{display:grid;justify-items:center;gap:4px;padding:12px 18px;min-height:44px;border-radius:20px;border:1px solid var(--line2);background:rgba(41,230,255,.07);color:var(--ink);cursor:pointer;font:700 17px var(--font-body)}
.zvpick:hover,.zvpick:focus-visible{background:rgba(41,230,255,.2);outline:none;box-shadow:0 0 22px rgba(41,230,255,.35)}
.zvhero{display:flex;gap:20px;align-items:center;flex-wrap:wrap;padding:16px;border-radius:22px;background:var(--panel);border:1px solid var(--line2);margin-bottom:14px}
.zvpv{padding:8px 14px;border-radius:18px;background:radial-gradient(ellipse at 50% 30%,rgba(41,230,255,.2),transparent 70%),rgba(255,255,255,.04)}
.zvctl{display:grid;gap:10px;min-width:220px;flex:1}
.zvlbl{font:700 12px var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.zvsw{display:flex;gap:8px;flex-wrap:wrap}
.zvsb{display:grid;gap:10px;margin:10px 0}.zvsbh{display:flex;gap:12px;align-items:center}.zvsbr{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.zvsbr input{font:800 18px Nunito,sans-serif;text-transform:uppercase;letter-spacing:.12em;width:9em;padding:6px 10px;border-radius:10px;border:2px solid rgba(255,255,255,.25);background:rgba(0,0,0,.25);color:inherit}.zvsb .zvsw button{width:34px;height:34px}.zvsbpv svg{display:block}
.zvsw button{width:44px;height:44px;border-radius:50%;border:3px solid transparent;cursor:pointer}
.zvsw button[aria-pressed=true]{border-color:#fff;box-shadow:0 0 0 2px var(--neon),0 0 14px var(--neon)}
.zvcoin{display:flex;align-items:center;gap:8px;font:800 22px var(--font-display);color:#ffe27a}
.zvcoin .wc{width:30px;height:30px;display:inline-block}
.zvshop .seg{display:flex;flex-wrap:wrap;margin-bottom:12px}
.zvgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.zvit{display:grid;justify-items:center;gap:4px;text-align:center;padding:10px;border-radius:18px;background:var(--panel);border:1px solid var(--line)}
.zvit.on{border-color:var(--neon);box-shadow:0 0 18px rgba(41,230,255,.3)}
.zvit b{font-size:15px}
.zvmini{border-radius:12px;background:rgba(255,255,255,.04);padding:4px 8px}
/* kolam ikan */
.klbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:8px}
.klbar select{min-height:44px;border-radius:999px;padding:0 14px;background:rgba(8,13,36,.9);color:var(--ink);border:1px solid var(--line2);font:700 14px var(--font-body)}
.kllay{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:14px;align-items:start}
.klstage{border-radius:22px;overflow:hidden;border:1px solid var(--line2);box-shadow:0 0 40px rgba(41,230,255,.12)}
.kltank{position:relative;height:min(64vh,620px);min-height:320px;background:#0a2c5e}
.kltank canvas{display:block;touch-action:manipulation;cursor:pointer}
.klstage:fullscreen{border-radius:0}.klstage:fullscreen .kltank{height:100vh}
.klhint{position:absolute;left:12px;bottom:10px;font:600 13px var(--font-body);color:rgba(255,255,255,.75);text-shadow:0 1px 3px rgba(0,0,0,.6);pointer-events:none}
.klinfo{position:absolute;transform:translateX(-50%);display:grid;gap:2px;padding:8px 12px;border-radius:14px;background:rgba(8,13,36,.92);border:1px solid var(--line2);color:var(--ink);font:600 14px var(--font-body);pointer-events:none;white-space:nowrap;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.klinfo[hidden]{display:none}
.klside{display:grid;gap:12px}
.klme{padding:14px;border-radius:18px;background:var(--panel);border:1px solid var(--line2);display:grid;gap:6px}
.klme h3{margin:0;font-family:var(--font-display);font-size:16px}
.klst{font-weight:700;color:#ffe27a}
.klpb{height:10px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden}.klpb i{display:block;height:100%;background:linear-gradient(90deg,var(--neon),var(--lime));box-shadow:0 0 10px var(--neon)}
.kllist{display:grid;gap:6px;max-height:min(52vh,520px);overflow:auto;padding-right:2px}
.klrow{display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 12px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--ink);cursor:pointer;text-align:left;font:600 15px var(--font-body)}
.klrow.me{border-color:rgba(255,210,61,.7);background:rgba(255,210,61,.1)}
.klrow.on{border-color:var(--neon);box-shadow:0 0 14px rgba(41,230,255,.35)}
.klrow .no{width:22px;text-align:center;font-weight:800;color:var(--muted)}
.klrow i{width:14px;height:14px;border-radius:50%;flex:none}
.klrow .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.klrow b{font-family:var(--font-display);font-size:13px;color:var(--neon)}
@media(max-width:900px){.kllay{grid-template-columns:minmax(0,1fr)}.kltank{height:56vh}}
.panel>.mgl{display:block!important;font:800 11px var(--font-display);letter-spacing:.2em;text-transform:uppercase;color:var(--neon);margin:4px 2px 0;opacity:.85}
.btn.m-sr{--c:#1fb3d6}
.panel{text-align:center}
.panel .modegrid,.panel .mgrow{flex-wrap:wrap!important;overflow-x:visible!important;justify-content:center!important;padding:2px 0 4px!important}
.panel>.mgl{text-align:center;margin-top:6px}
.panel .starrow{justify-content:center}
@media(max-width:700px){.panel .btn.mode{width:auto!important;min-width:0!important;flex:0 0 auto!important;min-height:42px!important;font-size:12px!important;padding:4px 12px 4px 4px!important}.panel .btn.mode .mi{width:28px;height:28px}.panel .modegrid,.panel .mgrow{gap:6px!important}}
@media(max-width:700px),(max-height:560px){.dock{max-height:46vh;overflow-y:auto;border-radius:22px}}
.gtable tr.gclick { cursor: pointer; }
.gtable tr.gclick:hover td, .gtable tr.gclick:focus td { background: var(--bg2); }
.gtable tr.gdet td { background: var(--panel); font-size: 14px; line-height: 1.5; }
.gtable tr.gdet td div { margin: 3px 0; }
/* ---------- v18.26: paparan utama baharu ----------
   Header hanya nama murid; butang Meta Didik di atas dengan kesan disedut ke metaverse; testimoni komen. */
.top #sjm,.top #walletBtn,.top #meRank,.top .xpbar,.top #meIns{display:none!important}
.top .me-t{display:block}.top .me-n{font:800 15px var(--font-body);letter-spacing:.02em}
.top .meb{padding:6px 16px!important}
.mdhero{position:relative;overflow:hidden;margin:4px auto 14px;max-width:1100px;border-radius:26px;padding:26px 22px;display:grid;gap:16px;justify-items:center;text-align:center;background:radial-gradient(ellipse at 50% 120%,rgba(111,224,166,.35),transparent 60%),radial-gradient(ellipse at 10% 0%,rgba(90,209,255,.35),transparent 55%),radial-gradient(ellipse at 90% 10%,rgba(155,107,255,.4),transparent 55%),#070d2a;border:1px solid rgba(125,227,255,.35);box-shadow:0 18px 50px rgba(0,0,0,.45),0 0 40px rgba(90,209,255,.15) inset}
.mdh-sky{position:absolute;top:-50%;right:-50%;bottom:-50%;left:-50%;inset:-50%;background-image:radial-gradient(1.5px 1.5px at 20% 30%,#fff,transparent),radial-gradient(1px 1px at 70% 60%,#fff,transparent),radial-gradient(1.5px 1.5px at 40% 80%,#cfe,transparent),radial-gradient(1px 1px at 85% 20%,#fff,transparent),radial-gradient(1px 1px at 55% 45%,#fff,transparent);background-size:220px 220px;opacity:.6;animation:mdSky 60s linear infinite;pointer-events:none}
@keyframes mdSky{to{transform:rotate(360deg)}}
.mdh-t{position:relative;display:grid;gap:4px;max-width:720px}
.mdh-k{font:800 12px var(--font-body);letter-spacing:.28em;color:#7de3ff}
.mdh-t b{font:700 clamp(40px,8vw,74px)/1 "Fredoka",var(--font-body);background:linear-gradient(90deg,#ffd45a,#6fe0a6 45%,#5ad1ff 75%,#b48bff);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 18px rgba(90,209,255,.35))}
.mdh-s{font:600 15px/1.45 var(--font-body);color:#d4e2ee}
.mdgo{position:relative;min-height:64px;padding:14px 38px;border-radius:999px;border:0;cursor:pointer;font:900 clamp(18px,3vw,23px) "Fredoka",var(--font-body);letter-spacing:.04em;color:#1d1300;background:linear-gradient(90deg,#ffd45a,#6fe0a6 55%,#5ad1ff);box-shadow:0 0 0 2px rgba(255,255,255,.35),0 10px 34px rgba(90,209,255,.5);animation:mdPulse 2.4s ease-in-out infinite}
.mdgo:hover{transform:translateY(-2px) scale(1.03)}.mdgo:focus-visible{outline:3px solid #fff;outline-offset:4px}
.mdgo-ring{position:absolute;top:-8px;right:-8px;bottom:-8px;left:-8px;inset:-8px;border-radius:999px;border:2px solid rgba(125,227,255,.6);animation:mdRing 2.4s ease-out infinite;pointer-events:none}
@keyframes mdPulse{50%{box-shadow:0 0 0 2px rgba(255,255,255,.5),0 10px 46px rgba(111,224,166,.75)}}
@keyframes mdRing{from{transform:scale(.92);opacity:1}to{transform:scale(1.18);opacity:0}}
/* kesan disedut ke metaverse */
#mdWarp{position:fixed;top:0;right:0;bottom:0;left:0;inset:0;z-index:140;background:#02030c;display:grid;place-items:center;overflow:hidden}
#mdWarp canvas{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;width:100%;height:100%}
#mdWarp .mdw-t{position:relative;font:800 clamp(18px,3vw,26px) "Fredoka",var(--font-body);letter-spacing:.2em;color:#e9fbff;text-shadow:0 0 18px #5ad1ff;animation:mdWt 1.7s ease forwards}
@keyframes mdWt{0%{opacity:0;transform:scale(.6)}30%{opacity:1}80%{opacity:1;transform:scale(1.05)}100%{opacity:0;transform:scale(1.6)}}
/* pemilih subjek: portal */
#mdPick{position:fixed;top:0;right:0;bottom:0;left:0;inset:0;z-index:141;overflow-y:auto;padding:max(18px,env(safe-area-inset-top)) 16px 30px;background:radial-gradient(ellipse at 50% 0%,rgba(90,209,255,.25),transparent 60%),radial-gradient(ellipse at 50% 120%,rgba(155,107,255,.3),transparent 60%),#040822;color:#fff;animation:mdIn .5s ease}
@keyframes mdIn{from{opacity:0;transform:scale(1.08)}}
#mdPick .mdp-in{max-width:980px;margin:0 auto;display:grid;gap:14px}
#mdPick h2{margin:6px 0 0;font:700 clamp(26px,5vw,40px) "Fredoka",var(--font-body);text-align:center}
#mdPick .mdp-s{text-align:center;color:#bcd3e6;margin:0}
#mdPick .mdp-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
#mdPick .mdp-c{position:relative;display:grid;gap:6px;text-align:left;padding:16px;border-radius:20px;border:1px solid rgba(125,227,255,.45);background:linear-gradient(160deg,rgba(90,209,255,.18),rgba(155,107,255,.14));color:#fff;cursor:pointer;font:inherit;min-height:120px;box-shadow:0 0 24px rgba(90,209,255,.12)}
#mdPick .mdp-c:hover:not(.lock){transform:translateY(-3px);box-shadow:0 0 34px rgba(111,224,166,.4);border-color:#6fe0a6}
#mdPick .mdp-c b{font:700 20px "Fredoka",var(--font-body)}#mdPick .mdp-c span{font-size:13px;color:#cfe0ee}
#mdPick .mdp-c i{font-style:normal;font-size:30px}
#mdPick .mdp-c.cur{border-color:#ffd45a;box-shadow:0 0 30px rgba(255,212,90,.35)}#mdPick .mdp-c.cur:after{content:"Subjek semasa";position:absolute;top:10px;right:12px;font:800 10px var(--font-body);letter-spacing:.1em;color:#2b1900;background:#ffd45a;padding:3px 8px;border-radius:99px}
#mdPick .mdp-c.lock{filter:grayscale(.8);opacity:.55;cursor:pointer;background:rgba(255,255,255,.04);border-style:dashed}
#mdPick .mdp-c.lock:after{content:"🔒 Dikunci";position:absolute;top:10px;right:12px;font:800 11px var(--font-body);color:#fff}
#mdPick .mdp-x{justify-self:center;min-height:44px;padding:8px 22px;border-radius:999px;border:1px solid rgba(255,255,255,.4);background:transparent;color:#fff;font:700 14px var(--font-body);cursor:pointer}
/* testimoni komen */
.testi{max-width:1100px;margin:0 auto 16px;display:grid;gap:10px}
.testi[hidden]{display:none}
.testi-h{display:flex;align-items:center;gap:10px;justify-content:space-between;flex-wrap:wrap}
.testi-h b{font:700 22px "Fredoka",var(--font-body);color:#fff}.testi-h span{color:var(--muted);font-size:13px}
.testi-h .btn{min-height:40px}
.testi-tr{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px 2px 12px;scrollbar-width:none}
.testi-tr::-webkit-scrollbar{display:none}
.testi-c{flex:0 0 min(320px,82%);scroll-snap-align:start;position:relative;display:grid;gap:8px;align-content:start;padding:16px 16px 14px;border-radius:20px;background:linear-gradient(160deg,rgba(90,209,255,.12),rgba(155,107,255,.1));border:1px solid rgba(125,227,255,.3);color:#e9f3fb;transition:transform .25s,box-shadow .25s;cursor:pointer}
.testi-c:hover,.testi-c.on{transform:translateY(-3px);box-shadow:0 10px 30px rgba(90,209,255,.25);border-color:#6fe0a6}
.testi-c:before{content:"\201C";position:absolute;top:-6px;right:14px;font:900 64px Georgia,serif;color:rgba(255,212,90,.35)}
.testi-c p{margin:0;font:600 15px/1.5 var(--font-body);display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.testi-c.open p{-webkit-line-clamp:unset}
.testi-w{display:flex;align-items:center;gap:10px}
.testi-av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font:800 16px var(--font-body);color:#1d1300;flex:none}
.testi-w b{display:block;font-size:14px}.testi-w small{color:#9fb6c8;font-size:12px}
.testi-r{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:99px;font:800 10px var(--font-body);letter-spacing:.06em;background:rgba(111,224,166,.2);color:#6fe0a6;vertical-align:middle}
.testi-r.guru{background:rgba(255,212,90,.22);color:#ffd45a}
.testi-n{display:flex;align-items:center;justify-content:center;gap:10px}
.testi-n button.ar{width:40px;height:40px;border-radius:50%;border:1px solid var(--line2);background:rgba(255,255,255,.05);color:#fff;font-size:18px;cursor:pointer}
.testi-d{display:flex;gap:6px}.testi-d i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.25);cursor:pointer}.testi-d i.on{background:#6fe0a6;width:20px;border-radius:99px}
@media (prefers-reduced-motion:reduce){.mdh-sky,.mdgo,.mdgo-ring{animation:none}}
/* ---------- v18.28: peta operasi dan PdPc hanya untuk guru DELIMa; Ruang Guru ---------- */
body:not(.gv) #v-map .mapstage,body:not(.gv) #v-map .legend,body:not(.gv) #v-map .tlist,body:not(.gv) #v-map .homebar,body:not(.gv) #v-map .dock,body:not(.gv) #v-map .mapctl,body:not(.gv) .gvonly{display:none!important}
#gvMapH{max-width:1100px;margin:18px auto 6px}#gvMapH small{font:600 13px var(--font-body);color:var(--muted);margin-left:6px}
#kmFab{display:none!important}
.gbtn{min-height:40px;padding:6px 14px;border-radius:999px;border:1px solid #ffd45a;background:linear-gradient(180deg,rgba(255,212,90,.22),rgba(255,159,67,.12));color:#ffe9a8;font:800 14px var(--font-body);cursor:pointer;white-space:nowrap}
.gbtn[hidden]{display:none}
.gtabs{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 12px}
.gtabs button{min-height:44px;padding:8px 16px;border-radius:999px;border:1px solid var(--line2);background:rgba(255,255,255,.04);color:var(--ink);font:800 14px var(--font-body);cursor:pointer}
.gtabs button[aria-pressed="true"]{background:linear-gradient(90deg,#ffd45a,#6fe0a6);color:#1d1300;border-color:transparent}
.ggate{display:grid;gap:12px;justify-items:start;padding:18px;border-radius:18px;border:1px solid var(--line2);background:rgba(255,255,255,.04);max-width:640px}
.lpick{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line2);background:#0d4f86;touch-action:none}
.lpick canvas{display:block;width:100%;cursor:crosshair}
.lpick-bar{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:6px 0}
.lpick-bar button{min-height:36px}
.lpick-out{font-size:14px;color:#ffe9a8}
/* v18.38: penaja */
.pjbar{max-width:1100px;margin:0 auto 16px;display:grid;gap:10px;padding:14px 16px;border-radius:20px;background:linear-gradient(135deg,rgba(255,212,90,.08),rgba(90,209,255,.06));border:1px solid rgba(255,212,90,.3)}
.pjbar-h{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.pjbar-k{font:800 12px var(--font-body);letter-spacing:.2em;color:#ffd45a}
.pjbar-r{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center}
.pjbar-kos{font-size:13px;opacity:.8;text-align:center;padding:6px}
.pjlogo{display:grid;place-items:center;background:#fff;border:2px solid transparent;border-radius:14px;padding:8px;cursor:pointer;transition:transform .15s}
.pjlogo:hover,.pjlogo:focus-visible{transform:translateY(-2px);border-color:#5ad1ff}
.pjlogo img{display:block;max-width:100%;max-height:100%;object-fit:contain}
.pjlogo.pj-platinum{width:200px;height:96px;border-color:#b9f3ff;box-shadow:0 0 18px rgba(90,209,255,.35)}
.pjlogo.pj-emas{width:150px;height:72px;border-color:#ffd45a}
.pjlogo.pj-rakan{width:110px;height:54px}
.pjform{display:grid;gap:10px}
.pjform .field{display:grid;gap:4px}
.pjpk{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.pjpk label{display:grid;gap:4px;padding:12px;border-radius:14px;border:2px solid var(--line2);cursor:pointer}
.pjpk label:has(input:checked){border-color:#ffd45a;background:rgba(255,212,90,.08)}
.pjpk b{font-size:16px}.pjpk .rm{font:800 20px var(--font-body);color:#ffd45a}
.pjprev{width:200px;height:96px;background:#fff;border-radius:12px;display:grid;place-items:center;overflow:hidden}
.pjprev img{max-width:100%;max-height:100%}
/* v18.42: kawasan perintis data sebenar */
#lpOv{position:fixed;top:0;right:0;bottom:0;left:0;inset:0;z-index:150;background:#0b1a2a;color:#fff;font-family:Nunito,system-ui,sans-serif;touch-action:none;user-select:none;-webkit-user-select:none;overflow:hidden}
#lpOv[hidden]{display:none}
#lpOv .lp-cv{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;width:100%;height:100%;display:block}
#lpOv .lp-kad{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(520px,92vw);background:rgba(10,30,52,.95);border:2px solid #5ff2ff;border-radius:16px;padding:18px;display:grid;gap:10px}
#lpOv .lp-bar{height:10px;border-radius:6px;background:rgba(255,255,255,.15);overflow:hidden}#lpOv .lp-bar i{display:block;height:100%;width:2%;background:linear-gradient(90deg,#5ff2ff,#ffd45a);transition:width .3s}
#lpOv .lp-btn{font:800 14px Nunito,sans-serif;color:#fff;background:rgba(8,24,40,.82);border:1px solid rgba(255,255,255,.3);border-radius:12px;padding:8px 12px;cursor:pointer;touch-action:manipulation}
#lpOv .lp-btn.on{background:#2f9e6a}
#lpOv .lp-info{position:absolute;left:max(10px,env(safe-area-inset-left));top:max(10px,env(safe-area-inset-top));background:rgba(8,24,40,.78);border-radius:999px;padding:6px 12px;font:800 13px Nunito,sans-serif;max-width:calc(100% - 240px)}
#lpOv .lp-mm{position:absolute;right:max(10px,env(safe-area-inset-right));top:max(10px,env(safe-area-inset-top));width:140px;height:140px;border-radius:50%;border:3px solid rgba(255,255,255,.7);box-shadow:0 6px 18px rgba(0,0,0,.4);cursor:pointer}
#lpOv .lp-atas{position:absolute;right:max(10px,env(safe-area-inset-right));top:calc(max(10px,env(safe-area-inset-top)) + 150px);display:flex;flex-direction:column;gap:6px;align-items:flex-end}
#lpOv .lp-bawah{position:absolute;right:max(14px,env(safe-area-inset-right));bottom:calc(30px + env(safe-area-inset-bottom));display:flex;gap:8px}
#lpOv .lp-bawah .lp-btn{padding:14px 16px;font-size:15px}
#lpOv .lp-atrib{position:absolute;left:8px;bottom:max(4px,env(safe-area-inset-bottom));font-size:11px;opacity:.85;background:rgba(0,0,0,.35);padding:2px 6px;border-radius:6px}
#lpOv .lp-fps{position:absolute;left:max(10px,env(safe-area-inset-left));top:calc(max(10px,env(safe-area-inset-top)) + 36px);font:700 12px monospace;background:rgba(0,0,0,.4);padding:2px 6px;border-radius:6px}
#lpOv .lp-js{position:absolute;width:110px;height:110px;border-radius:50%;background:rgba(255,255,255,.12);border:2px solid rgba(255,255,255,.3);display:none;pointer-events:none}#lpOv .lp-js i{position:absolute;left:35px;top:35px;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.6)}
#lpOv .lp-nav{position:absolute;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));transform:translateX(-50%);background:rgba(31,111,235,.9);border-radius:12px;padding:8px 14px;font:800 13px Nunito,sans-serif;max-width:90vw;text-align:center}
#lpOv .lp-big{position:absolute;top:max(10px,env(safe-area-inset-top));right:10px;bottom:10px;left:10px;inset:max(10px,env(safe-area-inset-top)) 10px 10px 10px;background:rgba(8,20,32,.96);border-radius:14px;display:grid;grid-template-rows:auto 1fr;gap:8px;padding:10px}
#lpOv .lp-big-h{display:flex;gap:8px;align-items:center;flex-wrap:wrap}#lpOv .lp-big-h b{flex:1}
#lpOv .lp-big canvas{width:100%;height:100%;object-fit:contain;min-height:0;cursor:crosshair}

/* v18.55: butang paparan penuh (disembunyikan dalam Meta Didik dan permainan, yang ada butang sendiri) */
#mdFsBtn { position: fixed; left: max(10px, env(safe-area-inset-left, 0px)); bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 80; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(10, 16, 10, .82); color: #f1e6c4; font: 600 12px/1.2 var(--font-util, system-ui); letter-spacing: .03em; cursor: pointer; backdrop-filter: blur(6px); }
#mdFsBtn:hover, #mdFsBtn:focus-visible { background: rgba(30, 44, 30, .95); outline: 2px solid var(--khaki, #c9b37a); outline-offset: 2px; }
body.ar-lock #mdFsBtn { display: none; }
/* v18.57: Gudang dibuka dari Profil dalam Meta Didik: sembunyi butang paparan penuh */
body.lm-gd #mdFsBtn { display: none; }
body.lm-gd #backBar { display: none !important; }
/* ---------- v18.59: halaman utama mesra murid (palet: langit #39BCEB, kuning #FFC857, hijau #65D6A0, ungu #9474E8, latar #F4FAFF, navy #17324D) ---------- */
body.vmap { background: #F4FAFF !important; color: #17324D; }
body.vmap .top { background: #17324D; border-bottom: 0; }
body.vmap .mdhero { position: relative; overflow: hidden; max-width: 1100px; margin: 6px auto 18px; padding: 30px 18px 0; border-radius: 28px; display: grid; align-content: start; justify-items: center; gap: 12px; text-align: center; background: linear-gradient(#7fd3f7, #d9f2ff 70%); border: 0; box-shadow: 0 10px 30px rgba(23, 50, 77, .12); }
body.vmap .mdhero:before, body.vmap .mdhero:after { display: none; }
.mdh-band { position: relative; justify-self: stretch; margin: 6px -18px 0; height: clamp(210px, 26vw, 320px); }
.mdh-scene { position: absolute; top:0;right:0;bottom:0;left:0;inset: 0; width: 100%; height: 100%; display: block; }
body.vmap .mdh-t { position: relative; z-index: 1; max-width: 640px; gap: 8px; }
body.vmap .mdh-t b { font: 700 clamp(34px, 7vw, 60px)/1.05 "Fredoka", var(--font-body); color: #17324D; background: none; -webkit-text-fill-color: #17324D; text-shadow: 0 3px 0 #fff; }
body.vmap .mdh-s { font: 700 clamp(15px, 2.4vw, 19px)/1.4 "Nunito", var(--font-body); color: #17324D; }
.mdh-av { position: absolute; z-index: 1; left: 50%; bottom: 4px; transform: translateX(-50%); display: flex; justify-content: center; align-items: flex-end; gap: 2px; }
.mdh-av svg { width: clamp(56px, 8vw, 92px); height: auto; filter: drop-shadow(0 5px 5px rgba(23, 50, 77, .25)); }
.mdh-av svg:nth-child(2) { width: clamp(64px, 9.5vw, 106px); }
body.vmap .mdgo { position: relative; z-index: 1; min-height: 64px; padding: 14px 42px; border-radius: 999px; background: #FFC857; color: #17324D; border: 4px solid #fff; box-shadow: 0 6px 0 #d9a23a, 0 12px 24px rgba(23, 50, 77, .2); font: 700 clamp(20px, 3.4vw, 26px) "Fredoka", var(--font-body); animation: none; }
body.vmap .mdgo:hover { transform: translateY(-2px); }
body.vmap .mdgo:active { transform: translateY(4px); box-shadow: 0 2px 0 #d9a23a; }
body.vmap .mdgo:focus-visible { outline: 3px solid #17324D; outline-offset: 4px; }
body.vmap .mdgo .mdgo-l { color: #17324D; -webkit-text-fill-color: #17324D; background: none; }
.mdh-2 { position: relative; z-index: 1; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.mdh-2 button { min-height: 46px; padding: 10px 20px; border-radius: 999px; border: 3px solid #fff; background: #17324D; color: #fff; font: 800 16px "Nunito", var(--font-body); cursor: pointer; }
.mdh-2 button:hover { background: #24496d; }
.mdh-2 button:focus-visible { outline: 3px solid #FFC857; outline-offset: 3px; }
.mdx { max-width: 1100px; margin: 0 auto 18px; padding: 18px; border-radius: 24px; background: #fff; box-shadow: 0 6px 20px rgba(23, 50, 77, .08); color: #17324D; }
.mdx h2 { margin: 0 0 12px; font: 700 24px "Fredoka", var(--font-body); color: #17324D; }
.mdx-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; counter-reset: md; }
.mdx-steps li { counter-increment: md; position: relative; display: grid; gap: 4px; justify-items: center; text-align: center; padding: 16px 10px 14px; border-radius: 18px; background: #F4FAFF; }
.mdx-steps li:before { content: counter(md); position: absolute; top: 8px; left: 10px; width: 26px; height: 26px; border-radius: 50%; background: #39BCEB; color: #fff; font: 800 14px/26px "Nunito", sans-serif; }
.mdx-steps i, .mdx-c i { font-style: normal; font-size: 34px; }
.mdx-steps b, .mdx-c b { font: 800 16px "Nunito", var(--font-body); }
.mdx-steps span, .mdx-c span { font: 600 14px/1.4 "Nunito", var(--font-body); color: #4f6880; }
.mdx-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
/* v18.99: Cara Bermain ringkas (satu baris kecil) */
.mdx-mini .mdx-steps { gap: 6px; }
.mdx-mini .mdx-steps li { padding: 10px 8px; }
.mdx-mini .mdx-steps li:before { display: none; }
.mdx-mini .mdx-steps i { font-size: 22px; }
.mdx-mini .mdx-steps b { font-size: 14px; }
.mdx-mini .mdx-steps span { font-size: 12.5px; }
@media (max-width: 600px) { .mdx-mini .mdx-steps { grid-template-columns: repeat(3, 1fr); } .mdx-mini .mdx-steps li { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 8px 4px; } }
.mdx-c { display: grid; gap: 4px; justify-items: center; text-align: center; padding: 16px 10px; border-radius: 18px; background: #fff; border: 3px solid var(--c); box-shadow: 0 4px 0 var(--c); }
@media (max-width: 600px) { .mdx-steps, .mdx-cards { grid-template-columns: 1fr; } .mdx-steps li, .mdx-c { grid-template-columns: auto 1fr; justify-items: start; text-align: left; column-gap: 12px; padding-left: 44px; } .mdx-steps li i, .mdx-c i { grid-row: span 2; align-self: center; } .mdx-c { padding-left: 14px; } }
body.vmap .testi { background: #fff; border-radius: 24px; padding: 18px; box-shadow: 0 6px 20px rgba(23, 50, 77, .08); }
body.vmap .testi-h b { color: #17324D; }
body.vmap .testi-h span, body.vmap .testi-w small { color: #4f6880; }
body.vmap .testi-c { background: #F4FAFF; color: #17324D; border-color: #d7e6f3; }
body.vmap .pjbar { background: #fff; border: 0; box-shadow: 0 6px 20px rgba(23, 50, 77, .08); color: #17324D; }
body.vmap .pjbar-k { color: #17324D; }
body.vmap .pjbar-kos { color: #4f6880; opacity: 1; }
body.vmap #cpFoot { color: #4f6880; }
body.vmap #cpFoot b, body.vmap #cpFoot a { color: #17324D; }
body.vmap #mdFsBtn { background: #17324D; }
@media (prefers-reduced-motion: reduce) { body.vmap .mdgo, .mdh-2 button { transition: none; } }
body.vmap .top .meb { background: #FFC857 !important; border: 2px solid #fff !important; box-shadow: none !important; }
body.vmap .top .meb .me-n { color: #17324D; -webkit-text-fill-color: #17324D; }
/* ---------- v18.60: kawasan selamat iPhone dan modal ----------
   Punca: .overlay tiada padding safe-area dan place-items:center memotong bahagian atas modal yang tinggi (tidak boleh diskrol).
   Penyelesaian: padding env(), item bermula di atas dengan margin auto (berpusat jika muat), satu kawasan skrol sahaja. */
.top { top: 0; padding-top: env(safe-area-inset-top, 0px); }
.overlay { place-items: start center; padding: calc(12px + env(safe-area-inset-top, 0px)) calc(12px + env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) calc(12px + env(safe-area-inset-left, 0px)); overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.overlay > * { margin-block: auto; }
body:has(.overlay:not([hidden])) { overflow: hidden; }
#lmOv .lm-card { padding: calc(14px + env(safe-area-inset-top, 0px)) calc(14px + env(safe-area-inset-right, 0px)) calc(14px + env(safe-area-inset-bottom, 0px)) calc(14px + env(safe-area-inset-left, 0px)); overscroll-behavior: contain; }
/* ---------- v18.60: wizard pendaftaran (tema cerah, mesra murid) ---------- */
#reg { background: rgba(23, 50, 77, .55); backdrop-filter: blur(4px); }
#reg .rgw { width: min(520px, 100%); background: #F4FAFF; color: #17324D; border: 0; border-radius: 24px; padding: 14px 18px 16px; gap: 12px; box-shadow: 0 20px 50px rgba(0, 0, 0, .3); font-family: "Nunito", var(--font-body); }
#reg .rg-hd { display: flex; align-items: center; justify-content: space-between; }
#reg .rg-ic { width: 44px; height: 44px; border-radius: 50%; border: 0; background: #fff; color: #17324D; font: 800 26px/1 "Nunito", sans-serif; cursor: pointer; box-shadow: 0 2px 6px rgba(23, 50, 77, .12); display: grid; place-items: center; }
#reg span.rg-ic { background: none; box-shadow: none; }
#reg .rg-logo { font: 700 20px "Fredoka", sans-serif; color: #39BCEB; }
#reg .rg-prog { display: flex; justify-content: space-between; position: relative; margin: 2px 8px 0; }
#reg .rg-prog:before { content: ""; position: absolute; left: 18px; right: 18px; top: 15px; height: 4px; border-radius: 4px; background: #d7e6f3; }
#reg .rg-prog i { position: relative; display: grid; justify-items: center; gap: 2px; font-style: normal; }
#reg .rg-prog b { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #d7e6f3; color: #4f6880; font: 800 15px "Nunito", sans-serif; border: 3px solid #F4FAFF; }
#reg .rg-prog span { font: 700 12px "Nunito", sans-serif; color: #4f6880; }
#reg .rg-prog i.on b { background: #9474E8; color: #fff; }
#reg .rg-prog i.on span { color: #17324D; font-weight: 800; }
#reg .rg-prog i.ok b { background: #65D6A0; color: #fff; font-size: 0; }
#reg .rg-prog i.ok b:after { content: "✓"; font-size: 16px; }
#reg .rg-no { margin: -4px 0 0; text-align: center; font-size: 12px; color: #4f6880; }
#reg .rg-s { display: grid; gap: 12px; }
#reg .rg-s[hidden] { display: none; }
#reg h1, #reg h2 { font: 700 clamp(26px, 6vw, 34px)/1.1 "Fredoka", sans-serif; color: #17324D; margin: 0; text-align: center; }
#reg h2 { font-size: clamp(22px, 5vw, 28px); }
#reg .rg-lead { text-align: center; color: #3d5670; margin: -4px auto 0; font-size: 15px; }
#reg .rg-roles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
#reg .rg-role { position: relative; display: grid; justify-items: center; align-content: start; gap: 4px; padding: 16px 8px 14px; border-radius: 18px; background: #fff; border: 3px solid #d7e6f3; cursor: pointer; text-align: center; min-height: 150px; transition: border-color .15s, transform .15s; }
#reg .rg-role input { position: absolute; opacity: 0; width: 1px; height: 1px; }
#reg .rg-role i { font-style: normal; font-size: 40px; line-height: 1.1; }
#reg .rg-role b { font: 700 18px "Fredoka", sans-serif; color: #17324D; }
#reg .rg-role span { font-size: 12.5px; line-height: 1.3; color: #4f6880; }
#reg .rg-role:has(input:checked) { border-color: #39BCEB; background: #eaf8ff; transform: translateY(-2px); }
#reg .rg-role:has(input:checked):after { content: "✓"; position: absolute; top: -8px; right: -8px; width: 26px; height: 26px; border-radius: 50%; background: #39BCEB; color: #fff; font: 800 15px/26px "Nunito", sans-serif; }
#reg .rg-role:has(input:focus-visible) { outline: 3px solid #9474E8; outline-offset: 2px; }
#reg .field { display: grid; gap: 4px; }
#reg .field label { font: 800 14px "Nunito", sans-serif; color: #17324D; text-transform: none; letter-spacing: 0; }
#reg .field label em { color: #e0584d; font-style: normal; }
#reg input:not([type=radio]), #reg select { min-height: 46px; padding: 10px 12px; border-radius: 14px; border: 2px solid #d7e6f3; background: #fff; color: #17324D; font: 700 16px "Nunito", sans-serif; width: 100%; box-sizing: border-box; }
#reg select[size] { min-height: 0; padding: 4px; }
#reg input:focus, #reg select:focus { outline: none; border-color: #39BCEB; box-shadow: 0 0 0 3px rgba(57, 188, 235, .25); }
#reg [aria-invalid=true] { border-color: #e0584d !important; }
#reg .rg-help, #reg #sekHint { font-size: 13px; color: #4f6880; margin: 0; }
#reg #roleNote:empty { display: none; }
#reg .two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#reg .rg-sum { margin: 0; background: #fff; border-radius: 18px; padding: 4px 12px; display: grid; }
#reg .rg-sum div { display: grid; grid-template-columns: 130px 1fr 36px; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid #e6f0f8; }
#reg .rg-sum div:last-child { border-bottom: 0; }
#reg .rg-sum dt { font-size: 13px; color: #4f6880; display: flex; gap: 8px; align-items: center; }
#reg .rg-sum dt i { font-style: normal; }
#reg .rg-sum dd { margin: 0; font-weight: 800; overflow-wrap: anywhere; }
#reg .rg-ed { width: 36px; height: 36px; border-radius: 50%; border: 0; background: #F4FAFF; color: #9474E8; font-size: 16px; cursor: pointer; }
#reg .rg-ft { position: sticky; bottom: calc(-16px - env(safe-area-inset-bottom, 0px)); display: flex; gap: 10px; padding: 10px 0 2px; background: linear-gradient(rgba(244, 250, 255, 0), #F4FAFF 30%); }
#reg .rg-ft .btn { flex: 1; min-height: 50px; border-radius: 999px; font: 800 17px "Nunito", sans-serif; text-transform: none; letter-spacing: 0; }
#reg .rg-ft #rgNext { background: #9474E8; color: #fff; border: 0; }
#reg .rg-ft .rg-go { background: #65D6A0; color: #0f3a28; border: 0; }
#reg .rg-ft #rgPrev { flex: 0 0 auto; background: #fff; color: #17324D; border: 2px solid #d7e6f3; padding-inline: 18px; }
#reg .rg-more { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; }
#reg .rg-more .btn { min-height: 44px; background: #fff; color: #17324D; border: 2px solid #d7e6f3; border-radius: 999px; text-transform: none; letter-spacing: 0; }
#reg .rg-danger { flex-basis: 100%; margin-top: 4px; padding: 8px 12px; border-radius: 14px; background: #fff4f3; color: #7a2a24; font-size: 13px; }
#reg .rg-danger summary { cursor: pointer; font-weight: 800; color: #9a3a33; }
#reg .rg-danger p { margin: 6px 0; }
#reg .rg-danger .btn { border-color: #e0584d !important; color: #b3342b !important; }
#reg #linkBox { background: #fff; border-radius: 16px; padding: 10px 12px; }
#reg #linkBox summary { color: #17324D !important; font: 800 14px "Nunito", sans-serif; letter-spacing: 0; text-transform: none; }
#reg #linkBox .muted { color: #4f6880; }
#reg #linkBox .btn { text-transform: none; }
@media (max-width: 420px) { #reg .rg-roles { gap: 8px; } #reg .rg-role { min-height: 136px; padding: 12px 4px; } #reg .rg-role i { font-size: 34px; } #reg .rg-role span { font-size: 11.5px; } #reg .two { grid-template-columns: 1fr; } #reg .rg-sum div { grid-template-columns: 112px 1fr 36px; } }
@media (prefers-reduced-motion: reduce) { #reg .rg-role { transition: none; } }
body:has(.overlay:not([hidden])) #mdFsBtn { display: none; }
#reg #regHint { display: none; }
#reg .rg-ft .btn, #reg .rg-more .btn, #reg #linkBox .btn { background-image: none !important; box-shadow: none !important; text-shadow: none !important; -webkit-text-fill-color: currentColor; }
#reg .rg-ft #rgNext { background: #9474E8 !important; color: #fff !important; border: 0 !important; }
#reg .rg-ft .rg-go { background: #65D6A0 !important; color: #0f3a28 !important; border: 0 !important; }
#reg .rg-ft #rgPrev { background: #fff !important; color: #17324D !important; border: 2px solid #d7e6f3 !important; }
#reg .rg-more .btn { background: #fff !important; color: #17324D !important; border: 2px solid #d7e6f3 !important; }
#reg #linkBox .btn { background: #39BCEB !important; color: #fff !important; border: 0 !important; }
#reg .rg-more .rg-danger .btn { border-color: #e0584d !important; color: #b3342b !important; background: #fff !important; }
body.vmap .mcard:not(.rgw) { color: var(--ink); }
/* v18.61: pilihan privasi sekolah */
#reg .rg-chk { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 14px; background: #fff; border: 2px solid #d7e6f3; cursor: pointer; }
#reg .rg-chk[hidden] { display: none; }
#reg .rg-chk input { width: 24px; height: 24px; min-height: 0; margin: 0; flex: none; accent-color: #9474E8; }
#reg .rg-chk b { display: block; font-size: 14px; color: #17324D; }
#reg .rg-chk small { display: block; font-size: 12.5px; color: #4f6880; }
/* ---------- v18.61: Ruang Penaja: wizard 4 langkah (bayar dahulu) ---------- */
#pjOv { background: rgba(23, 50, 77, .55); backdrop-filter: blur(4px); }
#pjOv .mcard.pjw { background: #F4FAFF; color: #17324D; border: 0; border-radius: 24px; padding: 16px 18px; gap: 12px; font-family: "Nunito", var(--font-body); box-shadow: 0 20px 50px rgba(0, 0, 0, .3); max-width: 600px !important; }
#pjOv .pjw h1 { font: 700 clamp(22px, 5vw, 30px)/1.15 "Fredoka", sans-serif; color: #17324D; margin: 2px 0; }
#pjOv .pjw .tagline { color: #9474E8; letter-spacing: .14em; font: 800 12px "Nunito", sans-serif; }
#pjOv .pjw .muted, #pjOv .pjw small { color: #4f6880; }
#pjOv .pjw > .btn.alt.sm { float: none !important; justify-self: end; background: #fff !important; color: #17324D !important; border: 2px solid #d7e6f3 !important; border-radius: 999px; text-transform: none; letter-spacing: 0; min-height: 40px; }
.pjw-hd p { margin: 0; }
.pjw-prog { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); position: relative; }
.pjw-prog:before { content: ""; position: absolute; left: 12%; right: 12%; top: 15px; height: 4px; border-radius: 4px; background: #d7e6f3; }
.pjw-prog li { position: relative; display: grid; justify-items: center; gap: 2px; text-align: center; }
.pjw-prog b { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #d7e6f3; color: #4f6880; font: 800 15px "Nunito", sans-serif; border: 3px solid #F4FAFF; }
.pjw-prog span { font: 700 12px "Nunito", sans-serif; color: #4f6880; }
.pjw-prog li.on b { background: #9474E8; color: #fff; }
.pjw-prog li.on span { color: #17324D; font-weight: 800; }
.pjw-prog li.ok b { background: #65D6A0; color: #fff; }
.pjw-no { margin: -4px 0 0; text-align: center; font-size: 12px; color: #4f6880; }
.pjw-s { display: grid; gap: 10px; }
.pjw-s[hidden] { display: none !important; }
#pjOv .pjw .field { display: grid; gap: 4px; }
#pjOv .pjw .field label { font: 800 14px "Nunito", sans-serif; color: #17324D; text-transform: none; letter-spacing: 0; }
#pjOv .pjw input:not([type=radio]):not([type=checkbox]):not([type=color]), #pjOv .pjw select, #pjOv .pjw textarea { min-height: 46px; padding: 10px 12px; border-radius: 14px; border: 2px solid #d7e6f3; background: #fff; color: #17324D; font: 700 16px "Nunito", sans-serif; width: 100%; box-sizing: border-box; }
#pjOv .pjw input:focus, #pjOv .pjw select:focus, #pjOv .pjw textarea:focus { outline: none; border-color: #39BCEB; box-shadow: 0 0 0 3px rgba(57, 188, 235, .25); }
.pjw-pk { display: grid; gap: 10px; }
.pjw-pkc { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 12px 14px; border-radius: 18px; background: #fff; border: 3px solid #d7e6f3; cursor: pointer; position: relative; }
.pjw-pkc input { position: absolute; opacity: 0; }
.pjw-pkc i { grid-row: span 2; font-style: normal; font-size: 34px; }
.pjw-pkc b { font: 700 18px "Fredoka", sans-serif; color: #17324D; }
.pjw-pkc details summary { cursor: pointer; font-size: 13px; color: #9474E8; font-weight: 800; }
.pjw-pkc details small { display: block; margin-top: 4px; font-size: 13px; line-height: 1.4; }
.pjw-pkc:has(input:checked) { border-color: #FFC857; background: #fffaeb; }
.pjw-pkc:has(input:checked):after { content: "✓"; position: absolute; top: -8px; right: -8px; width: 26px; height: 26px; border-radius: 50%; background: #65D6A0; color: #fff; font: 800 15px/26px "Nunito", sans-serif; text-align: center; }
.pjw-pkc:has(input:focus-visible) { outline: 3px solid #9474E8; outline-offset: 2px; }
.pjw-bayar { display: grid; gap: 6px; padding: 12px; border-radius: 16px; background: #fff; border: 2px dashed #FFC857; }
.pjw-bayar p { margin: 0; font-size: 14px; }
.pjw-bayar .notice { background: #F4FAFF; color: #17324D; border-color: #d7e6f3; }
.pjw-chk { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; padding: 10px 12px; border-radius: 14px; background: #fff; border: 2px solid #d7e6f3; cursor: pointer; }
.pjw-chk input { width: 22px; height: 22px; flex: none; margin: 0; accent-color: #9474E8; }
.pjw-err { margin: 0; color: #b3342b; font-weight: 800; font-size: 14px; min-height: 0; }
.pjw-err:empty { display: none; }
.pjw-ft { position: sticky; bottom: calc(-16px - env(safe-area-inset-bottom, 0px)); display: flex; gap: 10px; padding: 10px 0 2px; background: linear-gradient(rgba(244, 250, 255, 0), #F4FAFF 30%); }
.pjw-ft .btn { flex: 1; min-height: 50px; border-radius: 999px !important; font: 800 17px "Nunito", sans-serif !important; text-transform: none !important; letter-spacing: 0 !important; background-image: none !important; box-shadow: none !important; }
.pjw-ft .btn:not(.alt) { background: #9474E8 !important; color: #fff !important; border: 0 !important; }
.pjw-ft .btn.pjw-go { background: #65D6A0 !important; color: #0f3a28 !important; }
.pjw-ft .btn.alt { flex: 0 0 auto; background: #fff !important; color: #17324D !important; border: 2px solid #d7e6f3 !important; padding-inline: 18px; }
.pjw-ft .btn[hidden] { display: none; }
.pjw-ok { display: grid; gap: 8px; justify-items: center; text-align: center; padding: 10px 0; }
.pjw-ok i { font-style: normal; font-size: 48px; }
.pjw-ok p { margin: 0; }
#pjOv .pjw > .btn:not(.alt) { background: #9474E8 !important; background-image: none !important; color: #fff !important; border-radius: 999px; text-transform: none; }
/* ---------- v18.62: borang Pacak Inovasi (wizard 4 langkah, tema cerah). :is(#lmOv, body) supaya mengatasi gaya butang dunia 3D ---------- */
:is(#lmOv, body) .stw { background: #F4FAFF; color: #17324D; border: 0; border-radius: 20px; padding: 12px 14px; display: grid; gap: 10px; font-family: "Nunito", var(--font-body); }
:is(#lmOv, body) .stw > summary { font: 700 18px "Fredoka", sans-serif !important; color: #17324D; }
:is(#lmOv, body) .stw > p.muted, :is(#lmOv, body) .stw .muted { color: #4f6880 !important; }
#lmOv .lm-pc .lm-stnform .stw > summary, #lmOv .lm-pc .lm-stnform .stw > p.muted { display: none; }
#lmOv .lm-pc .lm-box { width: min(560px, 100%); }
#lmOv .lm-pc .lm-stnform .stw { padding: 0; background: none; }
:is(#lmOv, body) .stw .notice { background: #fff; color: #17324D; border: 2px solid #d7e6f3; border-radius: 14px; padding: 10px 12px; font-size: 13.5px; }
:is(#lmOv, body) .stw .notice.warn { border-color: #f3b4ad; background: #fff4f3; }
:is(#lmOv, body) .stw .gstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
:is(#lmOv, body) .stw .gstat { background: #fff; border-radius: 12px; padding: 8px; text-align: center; color: #17324D; border: 0; }
:is(#lmOv, body) .stw .gstat span { color: #4f6880; }
:is(#lmOv, body) .stw .field { display: grid; gap: 4px; }
:is(#lmOv, body) .stw .field label { font: 800 14px "Nunito", sans-serif; color: #17324D; text-transform: none; letter-spacing: 0; }
:is(#lmOv, body) .stw input:not([type=checkbox]), :is(#lmOv, body) .stw select, :is(#lmOv, body) .stw textarea { min-height: 46px; padding: 10px 12px; border-radius: 14px; border: 2px solid #d7e6f3; background: #fff; color: #17324D; font: 700 15px "Nunito", sans-serif; width: 100%; box-sizing: border-box; }
:is(#lmOv, body) .stw textarea { min-height: 96px; resize: vertical; }
:is(#lmOv, body) .stw input:focus, :is(#lmOv, body) .stw select:focus, :is(#lmOv, body) .stw textarea:focus { outline: none; border-color: #39BCEB; box-shadow: 0 0 0 3px rgba(57, 188, 235, .25); }
:is(#lmOv, body) .stw .stw-help { font-size: 12.5px; color: #4f6880; }
:is(#lmOv, body) .stw .stw-loc { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 16px; background: #eaf8ff; border: 2px solid #bfe7f8; }
:is(#lmOv, body) .stw .stw-loc i { font-style: normal; font-size: 26px; }
:is(#lmOv, body) .stw .stw-loc b { display: block; font-size: 15px; }
:is(#lmOv, body) .stw .stw-loc small { display: block; font-size: 12px; color: #4f6880; }
:is(#lmOv, body) .stw .stw-prog { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); position: relative; }
:is(#lmOv, body) .stw .stw-prog:before { content: ""; position: absolute; left: 12%; right: 12%; top: 14px; height: 4px; border-radius: 4px; background: #d7e6f3; }
:is(#lmOv, body) .stw .stw-prog li { position: relative; display: grid; justify-items: center; gap: 2px; text-align: center; }
:is(#lmOv, body) .stw .stw-prog b { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #d7e6f3; color: #4f6880; font: 800 14px "Nunito", sans-serif; border: 3px solid #F4FAFF; }
:is(#lmOv, body) .stw .stw-prog span { font: 700 11.5px "Nunito", sans-serif; color: #4f6880; }
:is(#lmOv, body) .stw .stw-prog li.on b { background: #9474E8; color: #fff; }
:is(#lmOv, body) .stw .stw-prog li.on span { color: #17324D; font-weight: 800; }
:is(#lmOv, body) .stw .stw-prog li.ok b { background: #65D6A0; color: #fff; }
:is(#lmOv, body) .stw .stw-no { margin: -4px 0 0; text-align: center; font-size: 12px; color: #4f6880; }
:is(#lmOv, body) .stw .stw-s { display: grid; gap: 10px; }
:is(#lmOv, body) .stw .stw-s[hidden] { display: none; }
:is(#lmOv, body) .stw .stw-chips { display: flex; flex-wrap: wrap; gap: 6px; }
:is(#lmOv, body) .stw .stw-chips button { min-height: 40px; padding: 8px 12px; border-radius: 999px; background: #fff; color: #17324D; border: 2px solid #d7e6f3; font: 800 13px "Nunito", sans-serif; text-transform: none; letter-spacing: 0; box-shadow: none; cursor: pointer; }
:is(#lmOv, body) .stw .stw-chips button.on { background: #9474E8; border-color: #9474E8; color: #fff; }
:is(#lmOv, body) .stw .stw-chips button:focus-visible { outline: 3px solid #39BCEB; outline-offset: 2px; }
:is(#lmOv, body) .stw .stw-booth { background: #fff; border-radius: 18px; border: 3px solid #FFC857; box-shadow: 0 4px 0 #FFC857; padding: 12px 14px; display: grid; gap: 8px; }
:is(#lmOv, body) .stw .stw-bh { display: flex; gap: 10px; align-items: center; }
:is(#lmOv, body) .stw .stw-bh i { font-style: normal; font-size: 30px; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: #fff6dd; }
:is(#lmOv, body) .stw .stw-bh small { display: block; font-size: 12px; color: #4f6880; }
:is(#lmOv, body) .stw .stw-bh b { display: block; font: 700 18px "Fredoka", sans-serif; }
:is(#lmOv, body) .stw .stw-booth p { margin: 0; color: #3d5670; font-size: 14px; line-height: 1.45; }
:is(#lmOv, body) .stw .stw-tags { display: flex; flex-wrap: wrap; gap: 6px; }
:is(#lmOv, body) .stw .stw-tags span { padding: 4px 10px; border-radius: 999px; background: #F4FAFF; font: 800 12px "Nunito", sans-serif; color: #17324D; }
:is(#lmOv, body) .stw .stw-tl { font-size: 13px; color: #4f6880; }
:is(#lmOv, body) .stw .stw-err { margin: 0; color: #b3342b; font-weight: 800; font-size: 14px; }
:is(#lmOv, body) .stw .stw-err:empty { display: none; }
:is(#lmOv, body) .stw .stw-ft { display: flex; gap: 10px; }
:is(#lmOv, body) .stw .btn, :is(#lmOv, body) .stw .stw-ft button { flex: 1; min-height: 48px; border-radius: 999px; font: 800 16px "Nunito", sans-serif; text-transform: none; letter-spacing: 0; background: #9474E8; background-image: none; color: #fff; border: 0; box-shadow: none; text-shadow: none; -webkit-text-fill-color: currentColor; cursor: pointer; }
:is(#lmOv, body) .stw .stw-ft .stw-go { background: #65D6A0; color: #0f3a28; }
:is(#lmOv, body) .stw .stw-ft .btn.alt { flex: 0 0 auto; padding-inline: 18px; background: #fff; color: #17324D; border: 2px solid #d7e6f3; }
:is(#lmOv, body) .stw .stw-ft button[hidden] { display: none; }
:is(#lmOv, body) .stw .stw-cara { margin: 0; padding-left: 22px; display: grid; gap: 4px; font-size: 14px; }
:is(#lmOv, body) .stw ol:not([class]) { font-size: 13.5px; color: #3d5670; }
:is(#lmOv, body) .stw label.row { color: #17324D; font-size: 14px; }
/* v18.62: atasi gaya lama (.card/.btn !important, input gelap dunia 3D, skrol bersarang .lm-stnform) */
:is(#lmOv, body) .stw.card { background: #F4FAFF !important; border: 0 !important; box-shadow: none !important; }
#lmOv .lm-pc .lm-stnform { max-height: none; overflow: visible; }
#lmOv .lm-pc .lm-stnform .stw.card { background: transparent !important; padding: 0; }
:is(#lmOv, body) .stw input:not([type=checkbox]), :is(#lmOv, body) .stw select, :is(#lmOv, body) .stw textarea { background: #fff !important; color: #17324D !important; border: 2px solid #d7e6f3 !important; border-radius: 14px !important; }
:is(#lmOv, body) .stw input:focus, :is(#lmOv, body) .stw select:focus, :is(#lmOv, body) .stw textarea:focus { border-color: #39BCEB !important; }
:is(#lmOv, body) .stw .btn:not(.alt), :is(#lmOv, body) .stw .stw-ft button:not(.alt) { background: #9474E8 !important; color: #fff !important; border: 0 !important; box-shadow: none !important; }
:is(#lmOv, body) .stw .stw-ft .stw-go { background: #65D6A0 !important; color: #0f3a28 !important; }
:is(#lmOv, body) .stw .btn.alt, :is(#lmOv, body) .stw .stw-ft button.alt { background: #fff !important; color: #17324D !important; border: 2px solid #d7e6f3 !important; }
:is(#lmOv, body) .stw .stw-chips button { background: #fff !important; color: #17324D !important; border: 2px solid #d7e6f3 !important; }
:is(#lmOv, body) .stw .stw-chips button.on { background: #9474E8 !important; border-color: #9474E8 !important; color: #fff !important; }
:is(#lmOv, body) .stw .field label { color: #17324D !important; }
/* v18.65: avatar mini (ganti lencana pangkat Tempur dalam Meta Didik) */
.mdav { display: inline-grid; place-items: start center; border-radius: 50%; overflow: hidden; background: linear-gradient(#bfe9fb, #FFC857); flex: none; vertical-align: middle; }
.mdav svg { width: 200%; height: auto; margin-top: 6%; flex: none; }
.mdav-h { place-items: center; background: #FFC857; color: #17324D; font-family: "Fredoka", var(--font-body); font-weight: 700; }
.meb .xpbar { display: none; }

/* ===== v18.67: reka bentuk lakaran Meta Didik 2.0 (paparan utama) ===== */
body.vmap .top { display: none; }
body.vmap .mdhero.md2h { max-width: 560px; margin: 0 auto 18px; padding: calc(14px + env(safe-area-inset-top, 0px)) 14px 16px; border-radius: 0 0 30px 30px; gap: 8px; background: linear-gradient(180deg, #8fd8fb 0%, #c6ecff 46%, #e8f7ff 100%); box-shadow: 0 12px 30px rgba(23, 50, 77, .16); overflow: visible; }
@media (min-width: 600px) { body.vmap .mdhero.md2h { border-radius: 30px; margin-top: 12px; } }
.mdh-flag { position: absolute; left: 0; top: 0; width: 96px; height: 96px; border-top-left-radius: inherit; z-index: 0; filter: drop-shadow(1px 2px 2px rgba(0, 0, 0, .2)); }
@media (min-width: 600px) { .mdh-flag { border-top-left-radius: 30px; overflow: hidden; } }
.mdh-top { position: relative; z-index: 3; justify-self: stretch; display: flex; justify-content: center; align-items: center; min-height: 52px; }
.md-logo { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; }
.md-logo .md-cap { width: 40px; height: 28px; margin-bottom: -6px; filter: drop-shadow(0 2px 2px rgba(23, 50, 77, .3)); }
.md-logo b { font: 700 27px/1 "Fredoka", var(--font-body); letter-spacing: .01em; color: #fff; -webkit-text-stroke: 1.5px #2a37b8; paint-order: stroke fill; text-shadow: 0 3px 0 #2a37b8, 0 4px 8px rgba(23, 50, 77, .35); }
.md-burger { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; border: 3px solid #fff; background: linear-gradient(#2c4f9e, #172f6e); display: grid; place-content: center; gap: 4px; cursor: pointer; box-shadow: 0 4px 10px rgba(23, 50, 77, .3); }
.md-burger i { display: block; width: 20px; height: 3px; border-radius: 2px; background: #fff; }
.md-burger:focus-visible { outline: 3px solid #FFC857; outline-offset: 2px; }
.md-pop { position: absolute; right: 0; top: calc(100% + 6px); min-width: 210px; padding: 8px; border-radius: 18px; background: #fff; box-shadow: 0 14px 34px rgba(23, 50, 77, .25); display: grid; gap: 2px; text-align: left; z-index: 30; }
.md-pop[hidden] { display: none; }
.md-pop button, .md-pop a { display: block; width: 100%; min-height: 44px; padding: 10px 14px; border: 0; border-radius: 12px; background: none; color: #17324D; font: 800 15px "Nunito", var(--font-body); text-align: left; text-decoration: none; cursor: pointer; }
.md-pop button:hover, .md-pop a:hover, .md-pop button:focus-visible, .md-pop a:focus-visible { background: #EEF6FF; outline: none; }
body.vmap .md2h .mdh-t { position: relative; z-index: 2; gap: 6px; padding: 0 4px; }
body.vmap .md2h .mdh-t b { font: 700 clamp(33px, 9.4vw, 52px)/1.05 "Fredoka", var(--font-body); font-style: italic; letter-spacing: -.01em; background: linear-gradient(180deg, #7b4cf2 0%, #4a2fd0 55%, #2a23a8 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; text-shadow: none; filter: drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 4px 4px rgba(23, 50, 77, .3)); }
body.vmap .md2h .mdh-s { font: 800 clamp(14px, 3.8vw, 17px)/1.35 "Nunito", var(--font-body); color: #142a52; max-width: 330px; margin: 0 auto; }
.mdh-art { position: relative; z-index: 1; justify-self: stretch; margin: -6px -14px 0; }
.mdh-art img { display: block; width: 100%; height: auto; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%); mask-image: linear-gradient(180deg, transparent 0, #000 16%); }
body.vmap .md2h .mdgo { z-index: 2; margin-top: -40px; width: min(86%, 340px); min-height: 66px; padding: 10px 24px; border-radius: 999px; border: 3px solid #fff; background: linear-gradient(180deg, #ffe45c 0%, #ffcf1f 55%, #f6b400 100%); box-shadow: 0 6px 0 #c98a00, 0 12px 22px rgba(23, 50, 77, .3); font: 700 clamp(24px, 6.6vw, 30px) "Fredoka", var(--font-body); }
body.vmap .md2h .mdgo .mdgo-l { display: inline-flex; align-items: center; gap: 12px; color: #111; -webkit-text-fill-color: #111; }
body.vmap .md2h .mdgo svg { width: 30px; height: 30px; flex: none; }
.mdh-3 { position: relative; z-index: 2; justify-self: stretch; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; margin-top: 6px; }
.mdh-3 button { min-height: 82px; padding: 8px 6px; border-radius: 16px; border: 3px solid #fff; background: linear-gradient(180deg, #8a6cf6 0%, #5b3fd9 100%); color: #fff; display: grid; justify-items: center; align-content: center; gap: 4px; cursor: pointer; box-shadow: 0 4px 0 #3c2aa0, 0 8px 16px rgba(23, 50, 77, .22); font: 700 15px/1.1 "Fredoka", var(--font-body); }
.mdh-3 button[hidden] { display: none; }
.mdh-3 button.mdh-b2 { background: linear-gradient(180deg, #4cc6f6 0%, #1f8fe0 100%); box-shadow: 0 4px 0 #136aab, 0 8px 16px rgba(23, 50, 77, .22); }
.mdh-3 button svg { width: 30px; height: 30px; fill: currentColor; }
.mdh-3 button b { font: inherit; text-shadow: 0 1px 0 rgba(0, 0, 0, .25); }
.mdh-3 button:active { transform: translateY(3px); box-shadow: 0 1px 0 #3c2aa0; }
.mdh-3 button:focus-visible { outline: 3px solid #FFC857; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .mdh-3 button:active { transform: none; } }

/* ===== v18.67: Daftar Anggota ikut lakaran ===== */
#reg .rgw { background: linear-gradient(180deg, #dff1ff 0%, #F4FAFF 30%); }
#reg .rg-logo b { font-size: 22px; }
#reg .rg-logo .md-cap { width: 34px; height: 24px; }
#reg .rg-ic { background: linear-gradient(#2c4f9e, #172f6e); color: #fff; border: 3px solid #fff; box-shadow: 0 3px 8px rgba(23, 50, 77, .3); }
#reg span.rg-ic { background: none; border: 0; box-shadow: none; }
#reg .rg-no { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#reg[data-s="1"] .rg-prog { display: none; }
#reg .rg-prog b { border-color: #fff; }
#reg .rg-prog i.on b { background: #7a4cf0; }
#reg .rg-prog i.ok b { background: #2fbf5b; }
#reg .rg-prog:before { background: linear-gradient(90deg, #2fbf5b, #7a4cf0 55%, #d7e6f3 56%); }
#reg[data-s="3"] .rg-prog:before { background: linear-gradient(90deg, #2fbf5b, #2fbf5b 50%, #7a4cf0); }
#reg h1 { font-size: clamp(30px, 8vw, 38px); color: #1b2a6b; }
#reg h2 { color: #1b2a6b; }
#reg .rg-s[data-s="2"] h2 { font-size: 20px; font-family: "Nunito", sans-serif; font-weight: 800; }
#reg .rg-s[data-s="3"] h2 { font-size: clamp(26px, 7vw, 32px); }
#reg .rg-lead { font-size: 16px; color: #24364f; }
#reg .rg-roles { gap: 8px; }
#reg .rg-role { padding: 8px 4px 12px; border-radius: 18px; border: 2px solid rgba(255, 255, 255, .9); box-shadow: 0 4px 12px rgba(23, 50, 77, .12); background: linear-gradient(180deg, #d9f0ff, #f3faff); gap: 2px; }
#reg .rg-role:nth-child(2) { background: linear-gradient(180deg, #fff1c7, #fffaf0); }
#reg .rg-role:nth-child(3) { background: linear-gradient(180deg, #d8f5e6, #f2fcf6); }
#reg .rg-role img { width: 86%; max-width: 110px; height: auto; aspect-ratio: 176 / 204; object-fit: contain; border-radius: 12px; }
#reg .rg-role b { font-size: 19px; line-height: 1.05; display: grid; color: #1b2a6b; }
#reg .rg-role b small { font: 800 11px "Nunito", sans-serif; color: #24364f; }
#reg .rg-role span { font-size: 12px; color: #24364f; font-weight: 700; }
#reg .rg-role:has(input:checked) { border: 3px solid #1f9be6; background: linear-gradient(180deg, #c9eaff, #eaf7ff); box-shadow: 0 6px 16px rgba(31, 155, 230, .3); }
#reg .rg-role:has(input:checked):after { content: ""; top: -9px; right: -9px; width: 30px; height: 30px; background: #1f9be6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat; border: 3px solid #fff; box-sizing: border-box; }
#reg .rg-ft { justify-content: center; }
#reg .rg-ft #rgPrev { display: none; }
#reg .rg-ft #rgNext, #reg .rg-ft .rg-go { flex: 0 1 300px; min-height: 56px; font: 700 21px "Fredoka", sans-serif; box-shadow: 0 5px 0 rgba(0, 0, 0, .18), 0 10px 20px rgba(23, 50, 77, .2); }
#reg .rg-ft #rgNext { background: linear-gradient(180deg, #8f63f5, #6a3fe0); }
#reg .rg-ft .rg-go { flex-basis: 100%; background: linear-gradient(180deg, #4fd67a, #22a84c); color: #fff; }
#reg .rg-dots { display: none; justify-items: center; gap: 6px; color: #24364f; }
#reg[data-s="1"] .rg-dots { display: grid; }
#reg .rg-dots span { display: flex; align-items: center; }
#reg .rg-dots i { width: 14px; height: 14px; border-radius: 50%; border: 2.5px solid #1f9be6; background: #fff; }
#reg .rg-dots i + i { margin-left: 26px; position: relative; }
#reg .rg-dots i + i:before { content: ""; position: absolute; right: 100%; top: 50%; width: 26px; height: 2.5px; margin-top: -1.25px; background: #1f9be6; }
#reg .rg-dots i:first-child { background: #1f9be6; box-shadow: inset 0 0 0 2.5px #fff; }
#reg .rg-dots small { font: 700 14px "Nunito", sans-serif; }
#reg .rg-s[data-s="2"] input:not([type=radio]):not([type=checkbox]), #reg .rg-s[data-s="2"] select:not([size]) { padding-left: 44px; background-repeat: no-repeat; background-position: 14px 50%; background-size: 20px; border-radius: 12px; box-shadow: 0 2px 6px rgba(23, 50, 77, .08); }
#reg .rg-s[data-s="2"] select:not([size]) { -webkit-appearance: none; appearance: none; padding-right: 40px; background-image: var(--ic), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%2317324D' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-position: 14px 50%, right 14px center; background-size: 20px, 18px; }
#reg .rg-s[data-s="2"] input:not([type=radio]):not([type=checkbox]) { background-image: var(--ic); }
#reg #inName, #reg #inGuruEm { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232b4fb8'%3E%3Ccircle cx='12' cy='7.5' r='4.5'/%3E%3Cpath d='M3 21.5c.7-5 4.3-7.8 9-7.8s8.3 2.8 9 7.8z'/%3E%3C/svg%3E"); }
#reg #inGuruEm { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232b4fb8'%3E%3Cpath d='M3 5h18a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zm9 7.6L4 7.5v1.9l8 5 8-5V7.5z'/%3E%3C/svg%3E"); }
#reg #inTahap, #reg #inSubj { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232b4fb8'%3E%3Cpath d='M12 3 1 8.5 12 14l9-4.5V16h2V8.5z'/%3E%3Cpath d='M5.5 12.6V17c0 1.7 2.9 3.5 6.5 3.5s6.5-1.8 6.5-3.5v-4.4L12 15.9z'/%3E%3C/svg%3E"); }
#reg #inNegeri { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 20'%3E%3Crect width='28' height='20' rx='3' fill='%23fff'/%3E%3Cg fill='%23CC0001'%3E%3Crect width='28' height='1.43'/%3E%3Crect y='2.86' width='28' height='1.43'/%3E%3Crect y='5.71' width='28' height='1.43'/%3E%3Crect y='8.57' width='28' height='1.43'/%3E%3Crect y='11.43' width='28' height='1.43'/%3E%3Crect y='14.29' width='28' height='1.43'/%3E%3Crect y='17.14' width='28' height='1.43'/%3E%3C/g%3E%3Crect width='14' height='11.4' fill='%23010066'/%3E%3Ccircle cx='5.6' cy='5.7' r='3.3' fill='%23FC0'/%3E%3Ccircle cx='6.6' cy='5.7' r='2.7' fill='%23010066'/%3E%3Ccircle cx='10' cy='5.7' r='1.6' fill='%23FC0'/%3E%3C/svg%3E"); background-size: 24px, 18px !important; }
#reg #inSekolah, #reg #cariSek { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232b4fb8'%3E%3Cpath d='M12 2 4 6.5V9h16V6.5zM3 21h18v-2H3zM5 10h2.5v8H5zm5.75 0h2.5v8h-2.5zM16.5 10H19v8h-2.5z'/%3E%3C/svg%3E"); }
#reg #inKelas { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232b4fb8'%3E%3Ccircle cx='8' cy='8' r='3.6'/%3E%3Ccircle cx='16.5' cy='8.5' r='3'/%3E%3Cpath d='M1 20c.5-4 3.3-6.2 7-6.2s6.5 2.2 7 6.2z'/%3E%3Cpath d='M16 13.5c3.4 0 6.3 2.1 6.8 5.8H16.8c-.3-2.3-1.3-4.2-2.8-5.5.6-.2 1.3-.3 2-.3z'/%3E%3C/svg%3E"); }
#reg .rg-sum { border-radius: 16px; box-shadow: 0 4px 14px rgba(23, 50, 77, .1); padding: 4px 14px; }
#reg .rg-sum div { grid-template-columns: minmax(120px, 42%) 1fr 34px; }
#reg .rg-sum dt { gap: 12px; color: #24364f; font-weight: 700; }
#reg .rg-sum dt i { display: inline-grid; width: 24px; height: 24px; color: #2b4fb8; flex: none; }
#reg .rg-sum dt i svg { width: 24px; height: 24px; }
#reg .rg-sum dd { font-weight: 700; color: #17324D; text-transform: none; }
#reg .rg-ed { display: grid; place-items: center; color: #2b4fb8; background: #eef4ff; }
#reg .rg-ed svg { width: 17px; height: 17px; }
#reg .rg-ft #rgNext { background: linear-gradient(180deg, #8f63f5, #6a3fe0) !important; color: #fff !important; }
#reg .rg-ft .rg-go { background: linear-gradient(180deg, #4fd67a, #22a84c) !important; color: #fff !important; }

/* ===== v18.67: Suara Komuniti ikut lakaran ===== */
#v-komen { max-width: 560px; margin: 0 auto; padding: 18px 14px 24px; border-radius: 26px; background: linear-gradient(180deg, #dff1ff, #F4FAFF 40%); color: #17324D; }
#v-komen .km2-hd { text-align: center; }
#v-komen .km2-h { display: flex; justify-content: center; align-items: center; gap: 10px; margin: 0; font: 700 clamp(28px, 7.5vw, 34px)/1.1 "Fredoka", var(--font-body); color: #1b2a6b; text-transform: none; letter-spacing: 0; }
#v-komen .km2-ic svg { width: 40px; height: 40px; display: block; }
#v-komen .km2-hd .lead { margin: 6px auto 0; max-width: 330px; color: #24364f; font: 600 16px/1.35 "Nunito", var(--font-body); }
.km2-tulis { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 16px auto 14px; width: min(78%, 300px); min-height: 56px; border-radius: 999px; border: 3px solid #fff; background: linear-gradient(180deg, #8f63f5, #6a3fe0); color: #fff; font: 700 22px "Fredoka", var(--font-body); cursor: pointer; box-shadow: 0 5px 0 #4a2bb0, 0 10px 20px rgba(23, 50, 77, .2); }
.km2-tulis:focus-visible, .km2-chip:focus-visible, .km2-more:focus-visible { outline: 3px solid #FFC857; outline-offset: 2px; }
#v-komen .km-form { background: #fff; color: #17324D; border: 0; border-radius: 18px; box-shadow: 0 4px 14px rgba(23, 50, 77, .1); margin-bottom: 12px; }
#v-komen .km-form[hidden] { display: none; }
#v-komen .km-form .tagline { color: #1b2a6b !important; }
#v-komen .km-in { background: #F4FAFF !important; color: #17324D !important; border: 2px solid #d7e6f3 !important; border-radius: 12px !important; }
.km2-chips { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 8px; margin: 4px 0 12px; }
.km2-chip { min-height: 40px; border-radius: 999px; border: 2px solid #d7e6f3; background: #fff; color: #17324D; font: 800 15px "Nunito", var(--font-body); cursor: pointer; }
.km2-chip.on { background: linear-gradient(180deg, #45c0f5, #1f8fe0); border-color: #fff; color: #fff; box-shadow: 0 3px 8px rgba(31, 143, 224, .35); }
.km2-rf { width: 40px; min-height: 40px; border-radius: 50%; border: 2px solid #d7e6f3; background: #fff; color: #17324D; font: 800 18px "Nunito", sans-serif; cursor: pointer; }
#v-komen .km-list { display: grid; gap: 10px; }
#v-komen .km2-c { position: relative; display: grid; grid-template-columns: 44px 1fr; column-gap: 10px; row-gap: 2px; padding: 12px 40px 12px 12px; border: 0; border-radius: 18px; background: #fff; box-shadow: 0 3px 12px rgba(23, 50, 77, .1); color: #17324D; }
#v-komen .km2-c.flag { box-shadow: 0 0 0 2px #e0584d; }
.km2-av { grid-row: span 3; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: hsl(var(--h) 75% 88%); color: hsl(var(--h) 55% 30%); font: 700 20px "Fredoka", sans-serif; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(23, 50, 77, .15); }
#v-komen .km2-c .km-t { display: grid; gap: 0; }
.km2-nm { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.km2-nm b { font: 800 16px "Nunito", sans-serif; color: #17324D; }
#v-komen .km-role { font: 800 11px "Nunito", sans-serif; letter-spacing: 0; text-transform: none; padding: 2px 8px; border: 0; border-radius: 999px; background: #d9f7e4; color: #1b7a43; }
#v-komen .km-role.km-g { background: #e7defd; color: #5a34c8; }
#v-komen .km-role.km-i { background: #fff1c7; color: #8a5a00; }
.km2-t { font: 600 12px "Nunito", sans-serif; color: #5d7088; }
#v-komen .km2-c > .km-m { grid-column: 2; font: 600 16px/1.4 "Nunito", sans-serif; color: #17324D; margin-top: 4px; overflow-wrap: anywhere; }
#v-komen .km2-c .km-a { grid-column: 2; display: flex; gap: 8px; flex-wrap: wrap; }
#v-komen .km2-c .km-a:empty { display: none; }
.km2-more { position: absolute; top: 8px; right: 6px; width: 32px; height: 36px; border: 0; border-radius: 10px; background: none; color: #17324D; font: 900 20px/1 "Nunito", sans-serif; cursor: pointer; }
.km2-lapor { margin-top: 6px; min-height: 36px; padding: 6px 12px; border-radius: 999px; border: 2px solid #f3c6c2; background: #fff4f3; color: #9a3a33; font: 800 13px "Nunito", sans-serif; cursor: pointer; }
#v-komen .km-mod { margin-top: 14px; color: #4f6880; }
#v-komen .notice { background: #fff4e0 !important; color: #7a4a00 !important; border-color: #FFC857 !important; border-radius: 14px; }
body:has(#v-komen:not([hidden])) { background: #e9f5ff !important; }
body:has(#v-komen:not([hidden])) .bg, body:has(#v-komen:not([hidden])) .grid-bg { display: none; }

/* ===== v18.67: Ruang Penaja ikut lakaran ===== */
#pjOv .mcard.pjw { background: linear-gradient(180deg, #dff1ff 0%, #F4FAFF 32%); }
#pjOv .pjw .pjw-hd { text-align: center; }
#pjOv .pjw .pjw-hd .tagline { display: none; }
#pjOv .pjw h1 { color: #1b2a6b; font-size: clamp(25px, 6.6vw, 32px); }
#pjOv .pjw .pjw-hd p { font: 600 16px/1.35 "Nunito", sans-serif; color: #24364f; }
#pjOv .pjw.pjw-0 .pjw-prog, #pjOv .pjw.pjw-0 .pjw-no, #pjOv .pjw.pjw-0 .pjw-ft { display: none; }
#pjOv .pjw .pjw-no { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.pjw-prog li.on b { background: #7a4cf0; }
.pjw-prog li.on span { background: #e7defd; color: #4a2bb0; border-radius: 999px; padding: 1px 10px; }
.pjw-prog li.ok b { background: #2fbf5b; }
.pjw-sh { margin: 2px 0 0; font: 700 21px "Fredoka", sans-serif; color: #1b2a6b; }
.pjw-pkc { position: relative; grid-template-columns: 58px 1fr; padding: 12px 14px; border: 2px solid #fff; box-shadow: 0 4px 14px rgba(23, 50, 77, .1); }
.pjw-pki { grid-row: span 2; width: 54px; height: 58px; object-fit: contain; }
.pjw-pk0 { cursor: pointer; }
.pjw-pk0 b { font-size: 21px !important; color: #1b2a6b !important; }
.pjw-pk0 small { font: 600 13.5px/1.35 "Nunito", sans-serif !important; color: #24364f !important; }
.pjw-pkc:has(input:checked) { border-color: #FFC857; background: linear-gradient(180deg, #fff3b8, #ffe68a); }
.pjw-pkc:has(input:checked):after { content: ""; top: -10px; right: -10px; width: 30px; height: 30px; border: 3px solid #fff; box-sizing: border-box; background: #2fbf5b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat; }
#pjOv .pjw .pjw-mohon, #pjOv .pjw-ft .btn:not(.alt) { justify-self: center; min-height: 56px; border-radius: 999px !important; border: 3px solid #fff !important; background: linear-gradient(180deg, #8f63f5, #6a3fe0) !important; color: #fff !important; font: 700 21px "Fredoka", sans-serif !important; text-transform: none !important; letter-spacing: 0 !important; box-shadow: 0 5px 0 #4a2bb0, 0 10px 20px rgba(23, 50, 77, .2); }
#pjOv .pjw .pjw-mohon { width: min(86%, 320px); margin-top: 6px; }
#pjOv .pjw-ft .pjw-go { background: linear-gradient(180deg, #4fd67a, #22a84c) !important; box-shadow: 0 5px 0 #17803a, 0 10px 20px rgba(23, 50, 77, .2); }
.pjw-n0 { text-align: center; font-size: 12.5px; }
#pjOv .pjw .pjw-doku { justify-self: center; box-sizing: border-box; width: min(86%, 320px); min-height: 50px; padding: 8px 18px; border-radius: 999px !important; border: 2px solid #c9b8ff !important; background: #fff !important; color: #4b2bb8 !important; font: 800 16px/1.2 var(--font-body) !important; text-transform: none !important; letter-spacing: 0 !important; display: flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; margin: 4px auto 0; } /* v18.97 */
#pjOv .pjw .pjw-ic { padding-left: 46px !important; background-repeat: no-repeat; background-position: 12px 50%; background-size: 24px; }
#pjOv .pjw select.pjw-ic { -webkit-appearance: none; appearance: none; padding-right: 40px !important; background-image: var(--ic), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%2317324D' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-position: 12px 50%, right 14px center !important; background-size: 24px, 18px !important; }
#pjOv .pjw input.pjw-ic { background-image: var(--ic) !important; }
.pjw-ic-rm { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='18' rx='8' ry='3' fill='%23e3a400'/%3E%3Cellipse cx='12' cy='14' rx='8' ry='3' fill='%23f2b800'/%3E%3Cellipse cx='12' cy='10' rx='8' ry='3' fill='%23f6c21a'/%3E%3Cellipse cx='12' cy='6' rx='8' ry='3' fill='%23ffd84a' stroke='%23d99400'/%3E%3C/svg%3E"); }
.pjw-ic-bln { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232b4fb8'%3E%3Cpath d='M7 2h2v2h6V2h2v2h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2zM5 9v11h14V9zm2 2h2v2H7zm4 0h2v2h-2zm4 0h2v2h-2zm-8 4h2v2H7zm4 0h2v2h-2z'/%3E%3C/svg%3E"); }
.pjw-ic-jn { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 14l-2 8 7-3 7 3-2-8z' fill='%23e0584d'/%3E%3Ccircle cx='12' cy='9' r='7' fill='%23f6c21a' stroke='%23c98a00' stroke-width='1.5'/%3E%3Cpath d='M12 5.5l1.1 2.3 2.5.3-1.8 1.7.5 2.5-2.3-1.2-2.3 1.2.5-2.5-1.8-1.7 2.5-.3z' fill='%23fff3b8'/%3E%3C/svg%3E"); }
#pjOv .pjw input.pjw-ic { background-repeat: no-repeat !important; background-position: 12px 50% !important; background-size: 24px !important; background-color: #fff !important; }
#pjOv .pjw .pjw-sh { color: #1b2a6b !important; font: 700 21px "Fredoka", sans-serif !important; text-transform: none !important; letter-spacing: 0 !important; }
#pjOv .pjw .pjw-pkc:not(:has(input:checked)) { border-color: #fff !important; }

/* ===== v18.68: Peta Operasi & Pusat Pembelajaran (Meta Didik 2.0) ===== */
body.gv #gvMapH { max-width: 1240px; margin: 18px auto 8px; padding: 0 14px; font: 700 clamp(22px, 5vw, 30px)/1.15 "Fredoka", var(--font-body); color: #1b2a6b; text-transform: none; letter-spacing: 0; }
body.gv #gvMapH small { display: block; margin: 2px 0 0; font: 700 13px "Nunito", var(--font-body); color: #4f6880; }
.po2-ng { max-width: 1240px; margin: 0 auto 10px; padding: 2px 14px 6px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.po2-ng::-webkit-scrollbar { display: none; }
.po2-nb { flex: none; min-height: 40px; padding: 6px 14px; border-radius: 999px; border: 2px solid #d7e6f3; background: #fff; color: #17324D; font: 800 14px "Nunito", var(--font-body); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; box-shadow: 0 2px 6px rgba(23, 50, 77, .08); }
.po2-nb small { font: 800 11px "Nunito", sans-serif; color: #4f6880; background: #F4FAFF; border-radius: 999px; padding: 1px 6px; }
.po2-nb.on { background: linear-gradient(180deg, #45c0f5, #1f8fe0); border-color: #fff; color: #fff; }
.po2-nb.on small { background: rgba(255, 255, 255, .25); color: #fff; }
.po2-nb:focus-visible, .mc2-ic:focus-visible, .mc2-go:focus-visible, .mc2-sib:focus-visible, .po2-buka:focus-visible { outline: 3px solid #FFC857; outline-offset: 2px; }
.po2 { max-width: 1240px; margin: 0 auto; padding: 0 14px; display: grid; gap: 14px; align-items: start; }
@media (min-width: 1000px) { .po2 { grid-template-columns: minmax(0, 1fr) 370px; } .po2 .dock { position: sticky !important; top: 14px; bottom: auto !important; margin: 0 !important; } }
/* peta: laut cerah, darat hijau, sempadan halus */
body.gv #v-map .mapbox { background: radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, .55), transparent 60%), repeating-radial-gradient(circle at 70% 80%, rgba(255, 255, 255, .0) 0 14px, rgba(255, 255, 255, .14) 15px 16px), linear-gradient(180deg, #8fd8fb, #5fc2f0) !important; border: 3px solid #fff !important; border-radius: 24px !important; box-shadow: 0 8px 24px rgba(23, 50, 77, .14) !important; padding: 8px 8px 4px !important; }
body.gv #v-map .mapbox h3 { color: #fff !important; font: 800 12px "Nunito", var(--font-body) !important; letter-spacing: .06em !important; text-transform: none !important; display: inline-block; background: rgba(23, 50, 77, .55); border-radius: 999px; padding: 3px 10px; margin: 2px 0 4px 2px; }
body.gv #v-map .mapbox svg { max-height: min(68vh, 680px) !important; }
body.gv #v-map .st { fill: #9fe08a !important; stroke: rgba(255, 255, 255, .95) !important; stroke-width: .7 !important; filter: none !important; }
body.gv #v-map .st.part { fill: #7fd27a !important; }
body.gv #v-map .st.cap { fill: #5cc46f !important; }
body.gv #v-map .st.gold { fill: #FFD86B !important; stroke: #fff !important; }
body.gv #v-map .st.sel { stroke: #FFC857 !important; stroke-width: 1.8 !important; }
body.gv #v-map .st:hover { fill: #b7eba0 !important; }
body.gv #v-map svg g[pointer-events="none"] path[fill^="url(#gr-"] { opacity: .35; }
body.gv #v-map .sealbl { fill: rgba(255, 255, 255, .85) !important; font-family: "Nunito", sans-serif; font-weight: 800; letter-spacing: .25em; }
body.gv #v-map .stlbl { font-family: "Nunito", sans-serif; font-weight: 900; font-size: 6.6px; fill: #17324D; stroke: #fff; stroke-width: 2px; letter-spacing: .04em; }
/* penanda */
body.gv #v-map .mapbox .pin, body.gv #v-map .mapbox .pin.sel { filter: none !important; }
.pin .mk-body { stroke: #fff; stroke-width: 1.3; transition: transform .15s; transform-box: fill-box; transform-origin: 50% 100%; }
.pin .mk-sh { fill: rgba(23, 50, 77, .3); }
.pin .mk-disc { fill: #fff; pointer-events: none; }
.pin .mk-num { font: 900 5.6px "Nunito", sans-serif; fill: #17324D; text-anchor: middle; pointer-events: none; stroke: none; }
.pin .mk-lock { fill: none; stroke: #6c7f94; stroke-width: 1.1; stroke-linejoin: round; pointer-events: none; }
.pin .mk-ok { fill: #2fbf5b; stroke: #fff; stroke-width: .9; pointer-events: none; }
.pin .mk-okt { fill: none; stroke: #fff; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.pin.s3 .mk-body { stroke: #FFC857; stroke-width: 1.8; }
.pin.lock { opacity: .85; }
.pin:hover .mk-body, .pin:focus-visible .mk-body { transform: scale(1.15); }
.pin.sel .mk-body { stroke: #17324D; stroke-width: 1.8; transform: scale(1.22); }
.pin:focus-visible .mk-body { stroke: #9474E8; stroke-width: 2.2; }
.pin .mk-pulse { fill: rgba(255, 200, 87, .55); transform-box: fill-box; transform-origin: center; animation: po2Pulse 1.8s ease-out infinite; pointer-events: none; }
@keyframes po2Pulse { 0% { transform: scale(.7); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pin .mk-pulse { animation: none; opacity: .5; } .pin .mk-body { transition: none; } }
.po2-mini { filter: drop-shadow(0 1px 1px rgba(23, 50, 77, .35)); }
/* kawalan peta */
body.gv #v-map .mapctl { position: absolute !important; right: 10px !important; bottom: 10px !important; }
body.gv #v-map .mapctl button { background: #fff !important; color: #17324D !important; border: 2px solid #d7e6f3 !important; border-radius: 14px !important; box-shadow: 0 3px 10px rgba(23, 50, 77, .15) !important; }
/* Mission Card */
body.gv #v-map .dock { background: none !important; }
body.gv #panel.mc2, body.gv #panel { background: #fff !important; color: #17324D !important; border: 0 !important; border-radius: 24px !important; box-shadow: 0 10px 30px rgba(23, 50, 77, .16) !important; padding: 14px 16px 16px !important; text-align: left !important; display: grid; gap: 8px !important; }
body.gv #panel h3 { font: 700 19px/1.2 "Fredoka", var(--font-body) !important; color: #1b2a6b !important; letter-spacing: 0 !important; white-space: normal !important; margin: 0; }
body.gv #panel .tagline { color: #9474E8 !important; font: 800 12px "Nunito", sans-serif !important; letter-spacing: .04em !important; }
body.gv #panel .emp { color: #4f6880 !important; }
.mc2-hd { display: flex; align-items: flex-start; gap: 8px; }
.mc2-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 0; }
.mc2-chip { display: inline-flex; align-items: center; min-height: 26px; padding: 2px 10px; border-radius: 999px; font: 800 12px "Nunito", sans-serif; color: #fff; background: var(--c, #9474E8); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc2-chip.mc2-tk { background: #e8f6ff; color: #1f6fb0; }
.mc2-chip.mc2-kod { background: #fff4d6; color: #8a5a00; }
.mc2-ctl { display: flex; gap: 6px; flex: none; }
.mc2-ic { width: 36px; height: 36px; border-radius: 50%; border: 2px solid #d7e6f3; background: #F4FAFF; color: #17324D; font: 900 15px/1 "Nunito", sans-serif; cursor: pointer; display: grid; place-items: center; }
.mc2-ng { font: 700 13px "Nunito", sans-serif; color: #4f6880; margin-top: -4px; }
.mc2-prog { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
body.gv #panel .mc2-prog .starrow { display: inline-flex; gap: 1px; font-size: 18px; letter-spacing: 0; color: #FFC857; }
body.gv #panel .mc2-prog .starrow .off { color: #d7e6f3; }
.mc2-bar { flex: 1 1 80px; height: 8px; border-radius: 999px; background: #e6f0f8; overflow: hidden; }
.mc2-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #65D6A0, #2fbf5b); }
.mc2-prog small { font: 700 12px "Nunito", sans-serif; color: #4f6880; }
.mc2-obj { margin: 0; padding: 10px 12px; border-radius: 14px; background: #F4FAFF; font: 600 14px/1.4 "Nunito", sans-serif; color: #24364f; }
.mc2-obj b { color: #1b2a6b; }
.mc2-cta { display: flex; gap: 8px; flex-wrap: wrap; }
.mc2-go { flex: 1 1 140px; min-height: 50px; border-radius: 999px; border: 3px solid #fff; font: 700 17px "Fredoka", sans-serif; cursor: pointer; box-shadow: 0 4px 0 rgba(0, 0, 0, .15), 0 8px 16px rgba(23, 50, 77, .15); }
.mc2-mula { background: linear-gradient(180deg, #ffe45c, #f6b400); color: #17324D; }
.mc2-tuju { background: linear-gradient(180deg, #45c0f5, #1f8fe0); color: #fff; }
.mc2-go:active { transform: translateY(2px); }
.mc2-sub { font: 800 12px "Nunito", sans-serif; color: #4f6880; letter-spacing: .06em; text-transform: uppercase; margin-top: 2px; }
body.gv #panel .mc2-act { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px !important; padding: 0 !important; overflow: visible !important; justify-content: stretch !important; }
body.gv #panel .mc2-act .btn.mode { width: 100% !important; justify-content: flex-start; min-height: 48px !important; padding: 5px 12px 5px 5px !important; border-radius: 16px !important; border: 2px solid #fff !important; color: #fff !important; font: 800 14px "Nunito", sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; box-shadow: 0 3px 0 rgba(0, 0, 0, .14), 0 6px 12px rgba(23, 50, 77, .12) !important; }
body.gv #panel .mc2-act .btn.mode .mi { width: 34px; height: 34px; border-radius: 12px; background: rgba(255, 255, 255, .9); display: grid; place-items: center; }
body.gv #panel .mc2-act #btnSL { background: linear-gradient(180deg, #ffd45a, #f2a900) !important; color: #17324D !important; }
body.gv #panel .mc2-act #btnAR { background: linear-gradient(180deg, #45c0f5, #1f8fe0) !important; }
body.gv #panel .mc2-act #btnJT { background: linear-gradient(180deg, #ff9f6b, #f0703a) !important; }
body.gv #panel .mc2-act #btnBL { background: linear-gradient(180deg, #ff86b0, #e8558a) !important; }
body.gv #panel .mc2-act #btnNL { background: linear-gradient(180deg, #a98bf5, #7a4cf0) !important; }
.mc2-sibs { display: flex; gap: 6px; flex-wrap: wrap; }
.mc2-sib { min-height: 36px; padding: 4px 12px; border-radius: 999px; border: 2px solid #d7e6f3; background: #fff; color: #17324D; font: 800 13px "Nunito", sans-serif; cursor: pointer; }
.mc2-sib.on { background: #9474E8; border-color: #fff; color: #fff; }
body.gv #panel details.mc2-more { display: block !important; border-top: 1px solid #e6f0f8; padding-top: 6px; }
.mc2-more summary { cursor: pointer; font: 800 13px "Nunito", sans-serif; color: #9474E8; }
.mc2-more ul { margin: 6px 0; padding-left: 18px; font-size: 13.5px; color: #24364f; }
.mc2-std, .mc2-bank { font-size: 12.5px; color: #4f6880; margin-top: 6px; }
body.po2-tutup.gv #v-map .dock { display: none !important; }
.po2-buka { position: fixed; z-index: 30; right: max(14px, env(safe-area-inset-right)); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); min-height: 48px; padding: 8px 18px; border-radius: 999px; border: 3px solid #fff; background: linear-gradient(180deg, #8f63f5, #6a3fe0); color: #fff; font: 700 17px "Fredoka", sans-serif; cursor: pointer; box-shadow: 0 6px 18px rgba(23, 50, 77, .3); }
.po2-buka[hidden] { display: none; }
body:not(.gv) .po2-ng, body:not(.gv) .po2-buka { display: none !important; }
/* telefon potret: kad misi sebagai bottom sheet, peta di atasnya */
@media (max-width: 999px) and (min-height: 501px) {
  body.gv #v-map .po2 .dock { position: fixed !important; left: 0; right: 0; bottom: 0; top: auto !important; z-index: 40; margin: 0 !important; padding: 0 8px env(safe-area-inset-bottom, 0px) !important; max-height: 62vh !important; overflow: auto !important; border-radius: 24px 24px 0 0 !important; }
  body.gv #panel.mc2 { border-radius: 24px 24px 0 0 !important; box-shadow: 0 -8px 30px rgba(23, 50, 77, .22) !important; }
  body.gv #panel.mc2:before { content: ""; justify-self: center; width: 44px; height: 5px; border-radius: 999px; background: #d7e6f3; margin: -6px 0 2px; }
  body.gv #v-map .po2 { padding-bottom: 200px; }
  body.gv #panel .mc2-act { grid-template-columns: repeat(2, 1fr); }
  body.gv #v-map .mapbox svg { max-height: none !important; }
}
/* telefon landskap: peta dominan, kad di sisi */
@media (max-width: 999px) and (max-height: 500px) {
  .po2 { grid-template-columns: minmax(0, 1fr) min(300px, 42vw); padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
  body.gv #v-map .po2 .dock { position: sticky !important; top: 8px; bottom: auto !important; max-height: calc(100vh - 16px) !important; overflow: auto !important; margin: 0 !important; }
  body.gv #v-map .maps { grid-template-columns: minmax(0, 232fr) minmax(0, 385fr) !important; }
  body.gv #v-map .mapbox svg { max-height: calc(100vh - 70px) !important; }
  body.gv #panel .mc2-act { grid-template-columns: 1fr 1fr; }
  body.gv #panel .mc2-act .btn.mode { font-size: 12.5px !important; min-height: 42px !important; }
}
body.gv #panel { grid-template-columns: minmax(0, 1fr); min-width: 0; width: auto !important; max-width: 100% !important; box-sizing: border-box; }
body.gv #panel > * { min-width: 0; }
body.gv #v-map .po2 .dock { min-width: 0; }
@media (max-width: 999px) and (max-height: 500px) { body.gv #v-map .mapbox h3 { white-space: nowrap; font-size: 10px !important; } }
/* v18.69: medan gelaran */
#reg #inGel, #reg #inGelLain { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232b4fb8'%3E%3Cpath d='M12 3 1 8.5 12 14l9-4.5V16h2V8.5z'/%3E%3Cpath d='M5.5 12.6V17c0 1.7 2.9 3.5 6.5 3.5s6.5-1.8 6.5-3.5v-4.4L12 15.9z'/%3E%3C/svg%3E"); }
#reg #inGelLain { margin-top: 6px; }
.po2-tk { flex: none; min-height: 40px; padding: 6px 12px; border-radius: 999px; border: 2px solid #9474E8; background: #fff; color: #4a2bb0; font: 800 14px "Nunito", var(--font-body); }

/* ===== v18.74: Avatar Studio (Gudang avatar) ===== */
body:has(#v-gudang:not([hidden])) { background: #eaf4ff !important; }
#v-gudang { max-width: 560px; margin: 0 auto; }
#v-gudang > .sec, #v-gudang > .lead { display: none; }
#gudangBody.avs { display: grid; gap: 12px; padding: 14px 12px 28px; border-radius: 28px; background: linear-gradient(180deg, #f1ebff 0%, #eaf6ff 40%, #f4faff 100%); color: #17324D; font-family: "Nunito", var(--font-body); }
.avs h2, .avs h3 { margin: 0; color: #1b2a6b; font-family: "Fredoka", var(--font-body); letter-spacing: 0; text-transform: none; }
.avs-muted { color: #4f6880; font-size: 13.5px; margin: 0; }
.avs-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; justify-content: center; }
.avs-hd { display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center; }
.avs-hic { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; font-size: 26px; background: linear-gradient(135deg, #8f63f5, #4f8bf5); box-shadow: 0 4px 12px rgba(79, 70, 229, .3); }
.avs-hic.sm { width: 42px; height: 42px; border-radius: 50%; font-size: 22px; background: linear-gradient(135deg, #45c0f5, #4f6ff5); }
.avs-ht h2 { font-size: clamp(22px, 6.2vw, 30px); line-height: 1.05; white-space: nowrap; }
.avs-ht p { margin: 2px 0 0; color: #24364f; font-weight: 700; font-size: 14px; }
.avs-md { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px 5px 5px; border-radius: 999px; background: #fff; box-shadow: 0 2px 8px rgba(23, 50, 77, .12); }
.avs-md b { font: 700 16px "Fredoka", sans-serif; color: #17324D; } .avs-md small { font-weight: 800; color: #4f6880; }
.avs-coin { display: inline-block; width: 22px; height: 22px; border-radius: 50%; flex: none; background: radial-gradient(circle at 35% 30%, #fff3a8, #ffcf1f 45%, #e2a100 100%); box-shadow: inset 0 0 0 2px #f6b800, 0 1px 2px rgba(0, 0, 0, .2); }
.avs-coin.lg { width: 34px; height: 34px; }
.avs-info { width: 38px; height: 38px; border-radius: 50%; border: 2px solid #d7e6f3; background: #fff; color: #4a2bb0; font: 900 17px "Nunito", sans-serif; cursor: pointer; }
.avs-help { background: #fff; border-radius: 18px; padding: 10px 14px; box-shadow: 0 3px 10px rgba(23, 50, 77, .08); font-size: 14px; }
.avs-help ul { margin: 6px 0 0; padding-left: 18px; }
.avs-hero { position: relative; border-radius: 26px; overflow: hidden; background: radial-gradient(ellipse at 50% 85%, #ffffff 0%, rgba(255, 255, 255, 0) 55%), linear-gradient(180deg, #bfe6ff 0%, #e3f3ff 70%, #c9f0d8 100%); border: 3px solid #fff; box-shadow: 0 8px 24px rgba(23, 50, 77, .12); min-height: 320px; }
.avs-pv { display: grid; place-items: center; min-height: 320px; }
.avs-pv > svg { width: 62%; height: auto; }
.avs-pv canvas { width: 100% !important; height: auto !important; display: block; touch-action: none; cursor: grab; }
.avs-3d { position: absolute; right: 12px; top: 12px; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #8f63f5, #6a3fe0); color: #fff; font: 700 16px "Fredoka", sans-serif; border: 3px solid #fff; box-shadow: 0 3px 10px rgba(74, 43, 176, .35); }
.avs-vws { position: absolute; left: 10px; top: 12px; display: grid; gap: 6px; }
.avs-vw { min-width: 52px; min-height: 34px; padding: 4px 8px; border-radius: 12px; border: 2px solid #fff; background: rgba(255, 255, 255, .78); color: #1b2a6b; font: 800 12.5px "Nunito", sans-serif; cursor: pointer; }
.avs-hint { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); padding: 5px 14px; border-radius: 999px; background: rgba(255, 255, 255, .9); font: 800 13px "Nunito", sans-serif; color: #24364f; white-space: nowrap; }
.avs-spark { position: absolute; left: 50%; top: 40%; font-size: 40px; opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(.4); }
.avs-hero.pop .avs-spark { animation: avsSpark 1.2s ease-out; }
@keyframes avsSpark { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); } 30% { opacity: 1; transform: translate(-50%, -80%) scale(1.3); } 100% { opacity: 0; transform: translate(-50%, -140%) scale(1.6); } }
.avs-try { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 16px; background: #fff4d6; border: 2px solid #ffcf3a; font-weight: 700; }
.avs-ctl { display: grid; gap: 10px; }
.avs-gen { display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: #fff; border-radius: 999px; padding: 4px; box-shadow: 0 2px 8px rgba(23, 50, 77, .08); }
.avs-g { min-height: 48px; border-radius: 999px; border: 0; background: none; color: #24364f; font: 800 17px "Nunito", sans-serif; display: inline-flex; gap: 8px; align-items: center; justify-content: center; cursor: pointer; }
.avs-g i { font-style: normal; font-size: 20px; color: #4f6ff5; } .avs-gP i { color: #e8558a; }
.avs-g.on.avs-gL { background: linear-gradient(180deg, #4f8bf5, #3159d8); color: #fff; } .avs-g.on.avs-gL i { color: #fff; }
.avs-g.on.avs-gP { background: linear-gradient(180deg, #ff86b0, #e8558a); color: #fff; } .avs-g.on.avs-gP i { color: #fff; }
.avs-lbl { font: 800 15px "Nunito", sans-serif; color: #17324D; }
.avs-sw { display: flex; gap: 10px; flex-wrap: wrap; }
.avs-sw button { width: 46px; height: 46px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(23, 50, 77, .2); cursor: pointer; }
.avs-sw button[aria-pressed=true] { outline: 3px solid #39BCEB; outline-offset: 2px; }
.avs-sw.sm button { width: 34px; height: 34px; }
.avs-mdrow { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 18px; background: #fff; box-shadow: 0 2px 8px rgba(23, 50, 77, .08); }
.avs-mdrow b { font: 700 24px "Fredoka", sans-serif; color: #17324D; }
.avs-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 8px 16px; border-radius: 16px; border: 2px solid #fff; font: 800 15px "Nunito", sans-serif; cursor: pointer; box-shadow: 0 3px 0 rgba(0, 0, 0, .12), 0 6px 14px rgba(23, 50, 77, .1); color: #fff; }
.avs-btn.sm { min-height: 38px; padding: 5px 12px; border-radius: 999px; font-size: 13.5px; }
.avs-btn:disabled { cursor: default; opacity: .85; }
.avs-btn:focus-visible, .avs-chip:focus-visible, .avs-img:focus-visible, .avs-g:focus-visible, .avs-act:focus-visible { outline: 3px solid #FFC857; outline-offset: 2px; }
.avs-big { min-height: 56px; font: 700 21px "Fredoka", sans-serif; border-radius: 999px; }
.avs-ungu { background: linear-gradient(180deg, #8f63f5, #5b3fd9); } .avs-biru { background: linear-gradient(180deg, #45c0f5, #1f8fe0); }
.avs-hijau { background: linear-gradient(180deg, #4fd67a, #22a84c); } .avs-mint { background: #d6f5e3; color: #1b7a43; border-color: #bfeccf; }
.avs-merah { background: #ffe1e3; color: #c0392b; border-color: #ffc9cd; } .avs-putih { background: #fff; color: #1b2a6b; border-color: #d7e6f3; }
.avs-kelabu { background: #e3e9f0; color: #6c7f94; box-shadow: none; }
.avs-row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.avs-row3 .avs-btn { font-size: 13.5px; padding: 6px 8px; }
.avs-shop { display: grid; gap: 12px; padding: 14px 10px; border-radius: 26px; background: rgba(255, 255, 255, .65); }
.avs-sh { display: flex; gap: 10px; align-items: center; } .avs-sh h2 { font-size: 26px; } .avs-sh p { margin: 0; color: #24364f; font-size: 14px; font-weight: 700; }
.avs-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.avs-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 6px 14px; border-radius: 999px; border: 2px solid #fff; background: #fff; color: #1b2a6b; font: 800 14px "Nunito", sans-serif; cursor: pointer; box-shadow: 0 2px 6px rgba(23, 50, 77, .1); }
.avs-chip i { font-style: normal; font-size: 18px; } .avs-chip.sm { min-height: 34px; padding: 4px 12px; font-size: 13px; }
.avs-chip.on { background: linear-gradient(180deg, #5b8ff5, #3a5fe0); color: #fff; }
@media (max-width: 420px) { .avs-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } .avs-chips::-webkit-scrollbar { display: none; } .avs-chip { flex: none; } }
.avs-warna { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.avs-wc { position: relative; width: 36px; height: 36px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 2px 5px rgba(23, 50, 77, .2); cursor: pointer; }
.avs-wc.on { outline: 3px solid #2fbf5b; outline-offset: 1px; }
.avs-wc span { position: absolute; right: -8px; bottom: -6px; padding: 0 4px; border-radius: 999px; background: #ffcf1f; color: #17324D; font: 900 9.5px "Nunito", sans-serif; }
.avs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 520px) { .avs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.avs-card { position: relative; display: grid; justify-items: center; gap: 4px; padding: 8px 8px 12px; border-radius: 20px; background: #fff; border: 3px solid #fff; box-shadow: 0 4px 14px rgba(23, 50, 77, .1); text-align: center; }
.avs-card.on { border-color: #2fbf5b; box-shadow: 0 0 0 2px rgba(47, 191, 91, .25), 0 4px 14px rgba(23, 50, 77, .1); }
.avs-img { width: 100%; aspect-ratio: 1 / 1; border: 0; border-radius: 14px; cursor: pointer; display: grid; place-items: center; background: linear-gradient(180deg, #d9f0ff, #eef8ff 70%, #d7f3df); }
.avs-ou .avs-img, .avs-setk .avs-img { background: linear-gradient(180deg, #dcefff, #f0f8ff 60%, #d8f2e1); }
.avs-hd .avs-img, .avs-card.avs-hd .avs-img { background: linear-gradient(180deg, #ece4ff, #f6f2ff); }
.avs-img svg { width: 82%; height: auto; }
.avs-fx { font-size: 46px; } .avs-fx.big { font-size: 96px; }
.avs-nm { font: 700 15px/1.2 "Fredoka", sans-serif; color: #1b2a6b; }
.avs-st { font: 700 12.5px "Nunito", sans-serif; color: #4f6880; }
.avs-tick { position: absolute; right: 8px; top: 8px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #2fbf5b; color: #fff; font-weight: 900; border: 2px solid #fff; z-index: 1; }
.avs-rare { position: absolute; right: 6px; top: 6px; z-index: 1; padding: 2px 8px; border-radius: 999px; font: 900 11px "Nunito", sans-serif; background: #ffcf3a; color: #5c3b00; }
.avs-rare.avs-is { background: linear-gradient(90deg, #9474E8, #e8558a); color: #fff; } .avs-rare.avs-fr { background: #d6f5e3; color: #1b7a43; } .avs-rare.avs-bs { background: #e8f1fb; color: #3d5670; }
.avs-rare.inline { position: static; justify-self: start; }
.avs-cuba { min-height: 34px; padding: 4px 10px; border-radius: 999px; border: 2px solid #d7e6f3; background: #f1ebff; color: #4a2bb0; font: 800 12.5px "Nunito", sans-serif; cursor: pointer; }
.avs-sb { display: grid; gap: 8px; padding: 12px; border-radius: 18px; background: #fff; }
.avs-sbh { display: flex; gap: 10px; align-items: center; } .avs-sbr { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.avs-sb input { min-height: 40px; border-radius: 12px; border: 2px solid #d7e6f3; padding: 6px 10px; font: 800 15px "Nunito", sans-serif; width: 9em; text-transform: uppercase; }
/* halaman butiran */
.avs-dhd { display: flex; gap: 10px; align-items: center; } .avs-dhd h2 { font-size: 24px; }
.avs-back { width: 42px; height: 42px; border-radius: 50%; border: 2px solid #d7e6f3; background: #fff; color: #1b2a6b; font: 900 20px "Nunito", sans-serif; cursor: pointer; }
.avs-dtop { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px; border-radius: 24px; background: #fff; box-shadow: 0 4px 14px rgba(23, 50, 77, .1); }
.avs-dpv { border-radius: 18px; display: grid; place-items: center; min-height: 220px; background: radial-gradient(ellipse at 50% 80%, #fff, rgba(255, 255, 255, 0) 60%), linear-gradient(180deg, #e2d6ff, #f3eeff); }
.avs-dpv svg { width: 92%; height: auto; }
.avs-dinfo { display: grid; gap: 8px; align-content: start; } .avs-dinfo h3 { font-size: 23px; } .avs-dinfo p { margin: 0; font-size: 14px; color: #24364f; }
.avs-dharga { display: flex; align-items: center; gap: 6px; } .avs-dharga b { font: 700 24px "Fredoka", sans-serif; }
.avs-own { justify-self: start; padding: 4px 10px; border-radius: 999px; background: #eef2f7; font: 800 12.5px "Nunito", sans-serif; color: #3d5670; }
.avs-own.ok { background: #d6f5e3; color: #1b7a43; } .avs-own.on { background: #2fbf5b; color: #fff; }
.avs-acts { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 8px; }
.avs-act { display: grid; justify-items: center; gap: 4px; min-height: 84px; padding: 8px 6px; border-radius: 18px; border: 2px solid #fff; font: 800 14px/1.2 "Nunito", sans-serif; cursor: pointer; color: #fff; box-shadow: 0 3px 0 rgba(0, 0, 0, .1), 0 6px 14px rgba(23, 50, 77, .1); }
.avs-act i { font-style: normal; font-size: 24px; } .avs-act.avs-putih { color: #1b2a6b; border-color: #c9dcf0; } .avs-act.avs-hijau { background: #d6f5e3; color: #1b7a43; border-color: #bfeccf; }
.avs-act:disabled { opacity: .55; cursor: default; }
.avs-padan { display: grid; gap: 8px; padding: 12px; border-radius: 22px; background: #fff; box-shadow: 0 4px 14px rgba(23, 50, 77, .08); } .avs-padan h3 { font-size: 20px; }
.avs-pg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.avs-pk { display: grid; justify-items: center; gap: 2px; padding: 8px 4px; border-radius: 16px; border: 2px solid #eef2f7; background: #fff; cursor: pointer; font: 700 12.5px "Nunito", sans-serif; color: #1b2a6b; }
.avs-pk span:last-child { color: #8a5a00; font-weight: 900; }
.avs-pkimg svg { width: 64px; height: auto; }
/* dialog */
.avs-dlg .mcard { width: min(360px, 92vw); background: #fff !important; color: #17324D; border: 0 !important; border-radius: 24px; padding: 18px; display: grid; gap: 8px; text-align: center; font-family: "Nunito", var(--font-body); }
.avs-dlg h3 { margin: 0; font: 700 22px "Fredoka", sans-serif; color: #1b2a6b; }
.avs-dlg-ic { font-size: 42px; } .avs-dlg-harga { display: flex; justify-content: center; align-items: center; gap: 8px; } .avs-dlg-harga b { font: 700 28px "Fredoka", sans-serif; }
.avs-dlg-ft { display: flex; gap: 8px; justify-content: center; margin-top: 6px; } .avs-dlg-ft .avs-btn { flex: 1; }
.avs-tips { text-align: left; margin: 0; padding-left: 18px; font-size: 14px; }
.avs-gaya { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.avs-gk { display: grid; justify-items: center; gap: 4px; padding: 8px; border-radius: 16px; background: #f4faff; }
.avs-gpv svg { width: 70px; height: auto; }
@media (prefers-reduced-motion: reduce) { .avs-hero.pop .avs-spark { animation: none; } }

/* v18.90: paparan pentadbir bertab */
.adm-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 12px}
.adm-tabs button{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);color:inherit;font:800 15px Nunito,system-ui,sans-serif;cursor:pointer}
.adm-tabs button.on{background:linear-gradient(90deg,#ffd45a,#7fe3a8);color:#0f1b33;border-color:transparent}
.adm-tabs button:focus-visible{outline:3px solid #ffd45a;outline-offset:2px}
.adm-badge{min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:#e5484d;color:#fff;font:900 13px/22px Nunito,sans-serif;text-align:center}
.adm-kosong{display:grid;gap:4px;padding:14px 16px;margin:0 0 10px;border-radius:14px;border:1px dashed rgba(255,255,255,.3);background:rgba(255,255,255,.04);max-width:760px}
.adm-kosong.ada{border-style:solid;border-color:#ffd45a;background:rgba(255,212,90,.08)}
.adm-kosong span{font-size:14px;opacity:.85}
.adm-view .btn.sm{min-height:40px;padding:8px 18px;font-size:15px}
.adm-view details > summary{font-size:17px;padding:4px 0}

/* v18.91: akaun murid */
.akaun-box{display:grid;gap:8px;padding:12px 14px;border-radius:14px;border:1px solid rgba(127,227,255,.35);background:rgba(127,227,255,.06);margin:10px 0}
.akaun-box input{width:100%}
.akaun-box .lnk{background:none;border:0;color:#1f5fbf;text-decoration:underline;cursor:pointer;font:inherit;font-size:13px;padding:0}

/* v19.01: kesan visual dikongsi permainan 3D */
.fx-vig { position: absolute; top:0;right:0;bottom:0;left:0;inset: 0; pointer-events: none; z-index: 1; background: radial-gradient(ellipse at 50% 45%, rgba(0,0,0,0) 55%, rgba(4,10,24,.42) 100%); mix-blend-mode: multiply; }
.fx-flash { position: absolute; top:0;right:0;bottom:0;left:0;inset: 0; pointer-events: none; z-index: 2; animation: fxFlash .65s ease-out forwards; }
.fx-flash.ok { background: radial-gradient(circle at 50% 55%, rgba(120,255,190,.0) 30%, rgba(80,255,170,.38) 100%); }
.fx-flash.bad { background: radial-gradient(circle at 50% 55%, rgba(255,80,110,.0) 30%, rgba(255,60,90,.42) 100%); }
@keyframes fxFlash { 0% { opacity: 1 } 100% { opacity: 0 } }
.fx-pop { position: absolute; left: 50%; top: 38%; transform: translate(-50%, 0); z-index: 3; pointer-events: none; font: 900 clamp(28px, 6vw, 48px) "Fredoka", var(--font-body); letter-spacing: .02em; text-shadow: 0 4px 0 rgba(0,0,0,.25), 0 0 24px rgba(255,255,255,.35); animation: fxPop 1.25s cubic-bezier(.2,.9,.3,1) forwards; }
.fx-pop.ok { color: #7dffbe; } .fx-pop.bad { color: #ff9aaa; }
@keyframes fxPop { 0% { opacity: 0; transform: translate(-50%, 20px) scale(.6) } 18% { opacity: 1; transform: translate(-50%, 0) scale(1.15) } 35% { transform: translate(-50%, -6px) scale(1) } 100% { opacity: 0; transform: translate(-50%, -60px) scale(1) } }
.fx-conf { position: absolute; top:0;right:0;bottom:0;left:0;inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }
.fx-speed { position: absolute; top:0;right:0;bottom:0;left:0;inset: 0; pointer-events: none; z-index: 1; opacity: 0; background: repeating-conic-gradient(from 0deg at 50% 52%, rgba(255,255,255,.0) 0deg 4deg, rgba(255,255,255,.22) 4.4deg 4.8deg, rgba(255,255,255,0) 5.2deg 9deg); -webkit-mask-image: radial-gradient(circle at 50% 52%, transparent 34%, #000 78%); mask-image: radial-gradient(circle at 50% 52%, transparent 34%, #000 78%); transition: opacity .25s; animation: fxSpd .18s linear infinite; }
@keyframes fxSpd { 0% { transform: rotate(0deg) scale(1) } 100% { transform: rotate(1.4deg) scale(1.01) } }
@media (prefers-reduced-motion: reduce) { .fx-pop, .fx-flash, .fx-speed { animation: none } }
/* v19.05: halaman utama hanya ada butang Komen, Ruang Guru hanya dadu Cabut Nama; letak di kanan bawah supaya tidak bertindih dengan "Paparan penuh" di kiri */
#fabDock{left:auto!important;right:max(14px,env(safe-area-inset-right))}
body.vmap #fabDock{bottom:calc(var(--dockh,0px) + 18px + env(safe-area-inset-bottom,0px))}
body.vmap #fabDock>button#kmFab{width:52px!important;height:52px!important;min-width:52px;max-width:52px;max-height:52px;min-height:52px!important;border-radius:50%!important}
body.vmap #fabDock #kmFab svg{width:26px;height:26px}

/* ===== v19.47: Ruang Guru (reka semula ikut rujukan: papan permainan pendidikan futuristik) ===== */
#v-guru{--rg-bg:#041122;--rg-panel:#071c35;--rg-cy:#00dfff;--rg-blue:#008cff;--rg-gold:#ffd447;--rg-green:#00e6a0;--rg-purple:#936cff;--rg-ink:#f3faff;--rg-mut:#a5bdd7;--rg-line:rgba(0,223,255,.38);color:var(--rg-ink);font-family:"Barlow","Segoe UI",system-ui,sans-serif}
main.wrap:has(> #v-guru:not([hidden])){max-width:1680px}
#v-guru button{font-family:inherit}
.rg-hero{position:relative;display:flex;align-items:stretch;min-height:178px;margin:0 0 18px;border-radius:22px;overflow:hidden;background:radial-gradient(600px 220px at 18% 0,rgba(0,140,255,.22),transparent 70%),linear-gradient(100deg,#06182f 0%,#071c35 45%,#0a2a50 100%);border:1px solid rgba(0,223,255,.28);box-shadow:0 0 0 1px rgba(0,223,255,.06) inset,0 14px 40px rgba(0,0,0,.35)}
.rg-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,transparent,var(--rg-cy),transparent);opacity:.8}
.rg-hero-tx{position:relative;z-index:2;flex:1 1 auto;padding:20px 26px 18px;min-width:0}
.rg-h{display:flex;align-items:center;gap:14px;margin:0;font:700 46px/1.05 "Barlow",sans-serif;color:var(--rg-ink);letter-spacing:.01em;text-transform:none}
.rg-h::before{content:"";width:6px;align-self:stretch;min-height:56px;border-radius:4px;background:linear-gradient(180deg,#ffe37a,#ffb800);box-shadow:0 0 14px rgba(255,212,71,.65)}
.rg-cap{width:58px;height:58px;flex:0 0 auto;filter:drop-shadow(0 0 10px rgba(255,212,71,.45))}
.rg-cap svg{width:100%;height:100%}
.rg-lead{margin:6px 0 14px 20px;font-size:19px;font-weight:500;color:#d6e6f5}
.rg-stat{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:8px 14px;border-radius:16px;background:rgba(4,17,34,.72);border:1px solid rgba(0,223,255,.3);font-size:16px;color:var(--rg-ink);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.rg-stat:empty{display:none}
.rg-who b{color:var(--rg-ink)}
.rg-pill{display:inline-flex;align-items:center;padding:3px 12px;border-radius:999px;background:rgba(0,230,160,.14);border:1px solid rgba(0,230,160,.65);color:#5dffc6;font-weight:700;font-size:14px}
.rg-sep{width:1px;height:26px;background:rgba(165,189,215,.35)}
.rg-gel .muted{color:var(--rg-mut)!important}
.rg-gel select,.rg-gel input{background:#0b2546;color:var(--rg-ink);border:1px solid rgba(0,223,255,.4);border-radius:10px;padding:6px 10px;font-weight:600;font-size:16px;min-height:38px}
.rg-out{min-height:40px;padding:6px 16px;border-radius:12px;background:rgba(255,212,71,.08);border:1.5px solid var(--rg-gold);color:#ffe9a3;font-weight:700;font-size:16px;cursor:pointer;transition:box-shadow .2s,background .2s}
.rg-out:hover{background:rgba(255,212,71,.18);box-shadow:0 0 16px rgba(255,212,71,.4)}
.rg-art{position:relative;flex:0 0 42%;max-width:780px;min-height:178px}
.rg-art img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;object-position:50% 12%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%);mask-image:linear-gradient(90deg,transparent 0,#000 30%)}
.rg-tabs{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 16px}
.rg-tabs button{display:inline-flex;align-items:center;gap:9px;min-height:50px;padding:8px 20px;border-radius:999px;border:1px solid rgba(0,223,255,.42);background:linear-gradient(180deg,#0b2546,#071c35);color:var(--rg-ink);font:700 18px "Barlow",sans-serif;cursor:pointer;box-shadow:0 0 0 1px rgba(0,223,255,.05) inset;transition:box-shadow .2s,border-color .2s,transform .15s}
.rg-tabs button:hover{border-color:var(--rg-cy);box-shadow:0 0 14px rgba(0,223,255,.35)}
.rg-tabs button[aria-pressed="true"]{background:linear-gradient(180deg,#ffe680,#ffc21a);color:#2a1d00;border-color:#ffe27a;box-shadow:0 0 18px rgba(255,212,71,.55),0 0 0 1px rgba(255,255,255,.35) inset}
.rg-ti{font-size:21px;line-height:1}
/* --- papan Hafazan --- */
.rgh{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:22px;align-items:start}
.rgh-main{min-width:0}
.rgh-ik{display:inline-flex;width:22px;height:22px;flex:0 0 auto;vertical-align:middle}
.rgh-ik svg{width:100%;height:100%}
.rgh-ik svg:not([fill]){fill:currentColor}
.rgh-ik svg[fill="none"]{stroke:currentColor}
.rgh-ik.cy{color:var(--rg-cy)}.rgh-ik.emas{color:var(--rg-gold)}.rgh-ik.oren{color:#ffb547}
.rgh-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:0 0 18px}
.rgh-kad{position:relative;display:flex;align-items:center;gap:16px;min-height:100px;padding:14px 16px;border-radius:18px;border:1.5px solid var(--k);background:linear-gradient(135deg,color-mix(in srgb,var(--k) 26%,#071c35),#071c35 75%);box-shadow:0 0 18px color-mix(in srgb,var(--k) 35%,transparent),0 0 0 1px rgba(255,255,255,.05) inset;transition:transform .2s,box-shadow .2s}
.rgh-kad:hover{transform:translateY(-2px);box-shadow:0 0 26px color-mix(in srgb,var(--k) 55%,transparent)}
.rgh-kad.biru{--k:#1e8bff}.rgh-kad.hijau{--k:#00d68f}.rgh-kad.emas{--k:#ffc928}.rgh-kad.ungu{--k:#8a6cff}
.rgh-kad-i{display:flex;align-items:center;justify-content:center;width:66px;height:66px;flex:0 0 auto;border-radius:50%;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--k) 85%,#fff),color-mix(in srgb,var(--k) 60%,#071c35));box-shadow:0 0 16px color-mix(in srgb,var(--k) 60%,transparent);color:#fff}
.rgh-kad.emas .rgh-kad-i{color:#3a2a00}
.rgh-kad-i .rgh-ik{width:34px;height:34px}
.rgh-kad-t{min-width:0}
.rgh-kad-j{display:block;font-weight:700;font-size:17px;color:var(--rg-ink)}
.rgh-kad-v{display:flex;align-items:baseline;gap:6px}
.rgh-kad-v b{font-size:36px;line-height:1.05;font-weight:700;color:var(--rg-ink)}
.rgh-kad.ungu .rgh-kad-v b{color:#5dffc6;font-size:30px}
.rgh-kad-v span{font-size:15px;color:#cfe0f0}
.rgh-kad small{display:block;font-size:14px;color:#cfe0f0;line-height:1.2}
.rgh-panel{padding:18px 20px 14px;border-radius:22px;border:1px solid rgba(0,223,255,.55);background:linear-gradient(180deg,rgba(9,36,66,.92),rgba(7,28,53,.96));box-shadow:0 0 22px rgba(0,223,255,.18),0 0 0 1px rgba(0,223,255,.08) inset}
.rgh-ph{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding-bottom:12px;border-bottom:1px solid rgba(0,223,255,.18)}
.rgh-ph h3{display:flex;align-items:center;gap:12px;margin:0;font:700 30px "Barlow",sans-serif;color:var(--rg-ink);text-transform:none;letter-spacing:0}
.rgh-ph h3 .rgh-ik{width:36px;height:36px}
.rgh-chip{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;padding:6px 14px;border-radius:999px;background:rgba(4,17,34,.7);border:1px solid rgba(165,189,215,.25);font-size:14px;color:#dbe8f5}
.rgh-dot::before{content:"";display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;background:var(--rg-green);box-shadow:0 0 8px var(--rg-green);vertical-align:1px}
.rgh-tool{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:14px 0 8px}
.rg-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px 18px;border-radius:999px;border:1px solid rgba(0,223,255,.5);background:rgba(0,140,255,.08);color:var(--rg-ink);font:700 17px "Barlow",sans-serif;cursor:pointer;transition:box-shadow .2s,background .2s,transform .15s}
.rg-btn:hover:not(:disabled){box-shadow:0 0 16px rgba(0,223,255,.45);background:rgba(0,223,255,.14)}
.rg-btn:active:not(:disabled){transform:scale(.97)}
.rg-btn:disabled{opacity:.5;cursor:default}
.rg-btn.rg-cy{border:1.5px solid var(--rg-cy);background:linear-gradient(180deg,rgba(0,223,255,.16),rgba(0,140,255,.08));box-shadow:0 0 10px rgba(0,223,255,.25)}
.rg-btn.rg-gold{border:1.5px solid var(--rg-gold);background:linear-gradient(180deg,rgba(255,212,71,.2),rgba(255,180,0,.08));color:#fff3c4}
.rg-btn.rg-gold:hover:not(:disabled){box-shadow:0 0 16px rgba(255,212,71,.5)}
.rg-btn.rg-pri{background:linear-gradient(180deg,#ffe680,#ffc21a);border-color:#ffe27a;color:#2a1d00}
.rg-btn.sm{min-height:38px;padding:5px 14px;font-size:15px}
.rg-btn .rgh-ik{width:20px;height:20px}
.rg-vsep{width:1px;height:30px;background:rgba(165,189,215,.3)}
.rg-sel{min-height:44px;min-width:200px;padding:6px 14px;border-radius:14px;border:1px solid rgba(165,189,215,.45);background:#0b2546;color:var(--rg-ink);font:600 17px "Barlow",sans-serif}
.rg-cari-w{position:relative;flex:1 1 220px;display:flex;align-items:center}
.rg-cari-w .rgh-ik{position:absolute;left:14px;color:var(--rg-mut);pointer-events:none}
.rg-cari{width:100%;min-height:44px;padding:6px 16px 6px 46px;border-radius:999px;border:1px solid rgba(165,189,215,.45);background:rgba(4,17,34,.6);color:var(--rg-ink);font:500 17px "Barlow",sans-serif;box-sizing:border-box}
.rg-cari:focus,.rg-sel:focus{outline:none;border-color:var(--rg-cy);box-shadow:0 0 0 3px rgba(0,223,255,.2)}
.rgh-ring{display:flex;align-items:center;gap:10px;margin:6px 2px 10px;font-size:17px;color:#d6e6f5}
.rgh-ring .rgh-ik{color:#6fb6ff}
.rgh-tw{border:1px solid rgba(0,223,255,.22);border-radius:16px;overflow:hidden;background:rgba(4,17,34,.35)}
.rgh-tb{width:100%;border-collapse:collapse;font-size:17px}
.rgh-tb th{padding:12px 12px;text-align:left;font:700 14px "Barlow",sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#cfe0f0;background:rgba(0,140,255,.08);border-bottom:1px solid rgba(0,223,255,.22)}
.rgh-tb th.n,.rgh-tb td.n{text-align:center;font-variant-numeric:tabular-nums}
.rgh-tb td{padding:12px 12px;border-top:1px solid rgba(0,223,255,.12);color:var(--rg-ink)}
.rgh-r{cursor:pointer;transition:background .15s}
.rgh-r:hover td,.rgh-r:focus td{background:rgba(0,223,255,.06)}
.rgh-r:focus{outline:none}.rgh-r:focus-visible td{box-shadow:inset 0 0 0 2px rgba(0,223,255,.5)}
.rgh-r.buka td{background:rgba(0,140,255,.08)}
.rgh-r td.nm{display:flex;align-items:center;gap:10px;font-size:18px}
.rgh-chev{display:inline-block;width:14px;color:var(--rg-mut);font-size:20px;line-height:1}
.rgh-kls{display:inline-block;padding:3px 12px;border-radius:999px;border:1px solid rgba(0,223,255,.6);background:rgba(0,140,255,.18);font-weight:700;font-size:14px;color:#dff6ff;white-space:nowrap}
.rgh-due{display:inline-flex;align-items:center;gap:6px;font-weight:700}
.rgh-due .rgh-ik{color:#ffb21a;background:rgba(255,178,26,.18);border-radius:6px;padding:2px}
.rgh-akt{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;background:rgba(0,230,160,.12);border:1px solid rgba(0,230,160,.6);color:#7dffd0;font-weight:700;font-size:14px;white-space:nowrap}
.rgh-akt::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--rg-green);box-shadow:0 0 6px var(--rg-green)}
.rgh-akt.lama{background:rgba(165,189,215,.08);border-color:rgba(165,189,215,.35);color:var(--rg-mut)}
.rgh-akt.lama::before{background:var(--rg-mut);box-shadow:none}
.rgh-detr td{padding:4px 14px 14px;background:rgba(0,140,255,.05)}
.rgh-det{border:1px solid rgba(0,223,255,.28);border-radius:14px;background:rgba(7,28,53,.85);padding:2px 16px;animation:rgfade .25s ease}
.rgh-sr{display:grid;grid-template-columns:minmax(200px,max-content) 72px minmax(90px,1.5fr) 46px minmax(128px,auto) minmax(0,1.6fr) auto;align-items:center;gap:8px 14px;padding:12px 0;border-top:1px solid rgba(0,223,255,.15)}
.rgh-sr:first-child{border-top:0}
.rgh-sr-n{display:flex;align-items:center;gap:10px;font-size:18px;white-space:nowrap}
.rgh-sr-n .rgh-ik{width:28px;height:28px}
.rgh-sr-a{color:#d6e6f5;white-space:nowrap}
.rgh-bar{height:12px;border-radius:999px;background:rgba(165,189,215,.18);overflow:hidden}
.rgh-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#00b8ff,#00dfff);box-shadow:0 0 10px rgba(0,223,255,.6);transform-origin:left;animation:rgbar .7s ease-out}
.rgh-bar.siap i{background:linear-gradient(90deg,#00c98a,#3dffb4);box-shadow:0 0 10px rgba(0,230,160,.6)}
.rgh-pc{font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.rgh-stt{display:inline-flex;align-items:center;gap:6px;font-weight:700;white-space:nowrap}
.rgh-stt.siap{color:#3dffb4}.rgh-stt.dlm{color:#ffd76a}.rgh-stt.ulang{color:#ffb21a}
.rgh-tk{display:flex;align-items:center;gap:10px;line-height:1.25}
.rgh-tk .rgh-ik{width:26px;height:26px}
.rgh-tk span{display:block;font-size:15px;white-space:nowrap}.rgh-tk small{display:block;font-size:14px;color:var(--rg-mut);white-space:nowrap}
.rgh-tas{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px}
.rgh-ak{display:flex;flex-wrap:nowrap;gap:8px;justify-content:flex-end}
.rgh-tas:empty{display:none}
.rgh-tg{padding:3px 10px;border-radius:10px;font-size:14px;font-weight:600}
.rgh-tg.ok{background:rgba(0,230,160,.12);border:1px solid rgba(0,230,160,.45);color:#9dffd9}
.rgh-tg.ul{background:rgba(255,178,26,.12);border:1px solid rgba(255,178,26,.5);color:#ffd88a}
.rgh-nota{display:flex;align-items:center;gap:10px;margin:12px 4px 2px;font-size:15px;color:#cfe0f0}
.rgh-err{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 14px;padding:12px 16px;border-radius:14px;background:rgba(255,91,122,.1);border:1px solid rgba(255,91,122,.5);color:#ffd0d9}
.rgh-kosong{padding:34px 16px;text-align:center;color:var(--rg-mut)}
.rgh-kosong .rgh-ik.besar{width:64px;height:64px;color:rgba(0,223,255,.6);filter:drop-shadow(0 0 12px rgba(0,223,255,.4))}
.rgh-kosong h4{margin:10px 0 4px;font:700 22px "Barlow",sans-serif;color:var(--rg-ink)}
.rgh-kosong p{margin:0 auto;max-width:520px}
.rgh-ex{color:var(--rg-mut)}
/* skeleton */
.rgh-sk{border-radius:14px;background:linear-gradient(90deg,rgba(165,189,215,.08) 25%,rgba(165,189,215,.18) 50%,rgba(165,189,215,.08) 75%);background-size:200% 100%;animation:rgsk 1.3s linear infinite}
.rgh-sk-kad{height:100px;border-radius:18px}.rgh-sk-h{height:40px;margin-bottom:14px}.rgh-sk-r{height:46px;margin:10px 0}.rgh-sk-d{height:140px}
/* sidebar */
.rgh-side{display:flex;flex-direction:column;gap:16px;min-width:0}
.rgs{padding:16px 18px;border-radius:20px;border:1px solid rgba(0,223,255,.45);background:linear-gradient(180deg,rgba(9,36,66,.92),rgba(7,28,53,.96));box-shadow:0 0 18px rgba(0,223,255,.14)}
.rgs h3{display:flex;align-items:center;gap:10px;margin:0 0 12px;font:700 23px "Barlow",sans-serif;color:var(--rg-ink);text-transform:none;letter-spacing:0}
.rgs h3 .rgh-ik{width:30px;height:30px}
.rgs h3 small{font-size:18px;font-weight:500;color:#cfe0f0}
.rgs-tc{border-color:rgba(255,212,71,.65);box-shadow:0 0 18px rgba(255,212,71,.18)}
.rgs-tcg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.rgs-q{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:96px;padding:10px 6px;border-radius:14px;border:1px solid rgba(0,223,255,.45);background:linear-gradient(180deg,#0e2d55,#0a2342);color:var(--rg-ink);font:700 16px/1.15 "Barlow",sans-serif;text-align:center;cursor:pointer;transition:box-shadow .2s,transform .15s,border-color .2s}
.rgs-q .rgh-ik{width:36px;height:36px;color:var(--rg-cy);filter:drop-shadow(0 0 6px rgba(0,223,255,.6))}
.rgs-q:hover:not(:disabled){border-color:var(--rg-cy);box-shadow:0 0 18px rgba(0,223,255,.45);transform:translateY(-2px)}
.rgs-q:disabled{opacity:.5;cursor:default}
.rgs-hari{display:flex;align-items:center;gap:10px;padding:0 0 10px;margin-bottom:6px;border-bottom:1px solid rgba(0,223,255,.15);font-size:17px;font-weight:700}
.rgs-hari .rgh-ik{color:#cfe0f0}
.rgs-pill{margin-left:auto;padding:2px 12px;border-radius:999px;background:rgba(0,140,255,.25);border:1px solid rgba(0,223,255,.55);font-size:14px}
.rgs-li{display:flex;align-items:center;gap:12px;padding:10px 12px;margin-top:8px;border-radius:14px;background:rgba(4,17,34,.55);border:1px solid rgba(165,189,215,.18)}
.rgs-li>div{flex:1 1 auto;min-width:0}
.rgs-li .rg-btn,.rgh-ak .rg-btn{white-space:nowrap;flex:0 0 auto}
.rgs-li b{display:block;font-size:17px}.rgs-li small{display:block;font-size:14px;color:var(--rg-mut)}
.rgs-lagi{margin-top:10px;width:100%}
.rgs-kosong{margin:8px 2px;color:#9dffd9;font-weight:600}
.rgs-an .rgs-kosong{color:var(--rg-mut)}
.rgs-anb{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.rgs-dw{position:relative;width:150px;height:150px;flex:0 0 auto}
.rgh-donut{width:100%;height:100%;filter:drop-shadow(0 0 8px rgba(0,223,255,.35))}
.rgh-donut circle{transition:stroke-dasharray .8s ease}
.rgs-dc{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.rgs-dc b{font-size:32px;line-height:1}.rgs-dc small{font-size:15px;color:#cfe0f0}
.rgs-lg{flex:1 1 150px;display:flex;flex-direction:column;gap:6px;font-size:16px}
.rgs-lg b{font-size:18px;margin-bottom:2px}
.rgs-lg i{display:inline-block;width:12px;height:12px;margin-right:8px;border-radius:50%;vertical-align:-1px}
.rgs-ex{margin:8px 0 0;font-size:13px;color:var(--rg-mut)}
.rgs-pc{display:flex;align-items:center;gap:12px;border-color:rgba(255,212,71,.7);background:radial-gradient(260px 140px at 90% 50%,rgba(255,212,71,.25),transparent 70%),linear-gradient(180deg,#2a2208,#13110a);box-shadow:0 0 22px rgba(255,212,71,.25)}
.rgs-pc>div:first-child{flex:1 1 auto}
.rgs-pc p{margin:0;font-size:16px;color:#f6ecc8}
.rgs-lencana{display:flex;align-items:center;justify-content:center;width:84px;height:84px;flex:0 0 auto;border-radius:22px;transform:rotate(45deg);background:linear-gradient(135deg,#ffe680,#e7a300);box-shadow:0 0 22px rgba(255,212,71,.6);font-size:0}
.rgs-lencana::after{content:"★";transform:rotate(-45deg);font-size:40px;color:#7a4b00;text-shadow:0 1px 0 #fff3b0}
/* dialog */
.rgm{position:fixed;top:0;right:0;bottom:0;left:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:14px;background:rgba(2,8,18,.7);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:rgfade .2s ease}
.rgm-box{width:620px;max-width:100%;max-height:calc(100vh - 28px);overflow:auto;border-radius:22px;border:1px solid rgba(0,223,255,.55);background:linear-gradient(180deg,#0a2a50,#071c35);box-shadow:0 0 40px rgba(0,223,255,.25);color:#f3faff;font-family:"Barlow",sans-serif}
.rgm-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 20px 8px}
.rgm-hd h3{margin:0;font:700 24px "Barlow",sans-serif;text-transform:none;letter-spacing:0;color:#f3faff}
.rgm-x{width:40px;height:40px;border-radius:12px;border:1px solid rgba(165,189,215,.4);background:transparent;color:#f3faff;font-size:18px;cursor:pointer}
.rgm-bd{padding:4px 20px 8px;font-size:17px}
.rgm-bd label{display:block;margin:12px 0 4px;font-weight:700;color:#cfe0f0}
.rgm-bd select{width:100%;min-height:46px;padding:6px 12px;border-radius:12px;border:1px solid rgba(0,223,255,.45);background:#0b2546;color:#f3faff;font:600 17px "Barlow",sans-serif}
.rgm-bd h4{margin:16px 0 6px;font:700 18px "Barlow",sans-serif;color:#ffd447}
.rgm-ex{color:#a5bdd7;margin:0 0 6px}
.rgm-li{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 12px;margin:6px 0;border-radius:12px;background:rgba(4,17,34,.6);border:1px solid rgba(165,189,215,.18)}
.rgm-li>div{flex:1 1 180px}.rgm-li b{display:block}.rgm-li small{color:#a5bdd7}
.rgm-d{font-weight:700;color:#cfe0f0}.rgm-d.due{color:#ffd447}
.rgm-ft{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;padding:10px 20px 18px}
.rgm-scroll{overflow-x:auto}
.rgm-tb{width:100%;border-collapse:collapse;font-size:16px}
.rgm-tb th,.rgm-tb td{padding:8px 8px;border-bottom:1px solid rgba(0,223,255,.15);text-align:left;white-space:nowrap}
.rgm-tb th{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:#a5bdd7}
@keyframes rgbar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes rgsk{from{background-position:200% 0}to{background-position:-200% 0}}
@keyframes rgfade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){#v-guru *,.rgm,.rgm *{animation:none!important;transition:none!important}}
@media (max-width:1280px){.rgh{grid-template-columns:minmax(0,1fr) 340px}.rgs-tcg{grid-template-columns:1fr}.rgs-q{flex-direction:row;justify-content:flex-start;min-height:56px;padding:8px 14px}.rgs-q .rgh-ik{width:28px;height:28px}}
@media (max-width:1100px){.rgh{grid-template-columns:minmax(0,1fr)}.rgh-side{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.rgs-tcg{grid-template-columns:repeat(3,minmax(0,1fr))}.rgs-q{flex-direction:column;justify-content:center;min-height:90px}.rgh-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.rgh-sr{grid-template-columns:minmax(0,1fr) auto;}.rgh-sr .rgh-bar{grid-column:1/-1;order:3}.rgh-sr .rgh-pc{order:2}.rgh-ak{grid-column:1/-1;justify-content:flex-start}}
@media (max-width:860px){.rg-art{position:absolute;top:0;right:0;bottom:0;width:60%;opacity:.35}.rg-hero-tx{padding:16px}.rg-h{font-size:34px}.rg-cap{width:44px;height:44px}.rg-lead{margin-left:0;font-size:16px}.rgh-side{grid-template-columns:minmax(0,1fr)}}
@media (max-width:720px){
  .rg-tabs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;margin-inline:-2px;scrollbar-width:thin}
  .rg-tabs button{flex:0 0 auto;min-height:46px;padding:6px 16px;font-size:16px}
  .rg-stat{display:flex;padding:8px 12px;font-size:15px}.rg-sep{display:none}
  .rgh-stats{gap:10px}.rgh-kad{flex-direction:column;align-items:flex-start;gap:8px;padding:12px}.rgh-kad-i{width:48px;height:48px}.rgh-kad-i .rgh-ik{width:26px;height:26px}.rgh-kad-v b{font-size:30px}.rgh-kad.ungu .rgh-kad-v b{font-size:24px}
  .rgh-panel{padding:14px 12px}.rgh-ph h3{font-size:24px}
  .rg-sel{flex:1 1 100%;min-width:0}.rg-vsep{display:none}.rgh-tool .rg-btn{flex:1 1 140px}
  .rgh-tw{border:0;background:none}
  .rgh-tb,.rgh-tb tbody,.rgh-tb tr,.rgh-tb td{display:block;width:100%;box-sizing:border-box}
  .rgh-tb thead{display:none}
  .rgh-r{margin:0 0 10px;border:1px solid rgba(0,223,255,.3);border-radius:16px;background:rgba(7,28,53,.9);padding:6px 4px;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))}
  .rgh-r td{border:0;padding:6px 10px;font-size:15px}
  .rgh-r td.nm{grid-column:1/-1;font-size:19px}
  .rgh-r td:not(.nm)::before{content:attr(data-l);display:block;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--rg-mut)}
  .rgh-r td.n{text-align:left}
  .rgh-detr{margin:-6px 0 12px}.rgh-detr td{padding:0}
  .rgh-sr{grid-template-columns:minmax(0,1fr) auto}.rgh-tk,.rgh-stt,.rgh-ak{grid-column:1/-1}.rgh-ak{flex-wrap:wrap;justify-content:flex-start}
  .rgs-tcg{grid-template-columns:repeat(3,minmax(0,1fr))}.rgs-q{min-height:84px;font-size:14px}
}
@media (max-width:420px){.rgh-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.rgh-kad small{font-size:12px}.rg-h{font-size:30px}}
/* pengepala semasa Ruang Guru: wordmark META DIDIK dan loceng peringatan murajaah */
body.vguru .brand{font:italic 900 34px/1 "Barlow","Segoe UI",sans-serif!important;letter-spacing:.01em!important;text-transform:uppercase;background:linear-gradient(90deg,#6fe6ff 0%,#1f8bff 44%,#ffd447 52%,#ffb000 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 8px rgba(0,180,255,.45))}
body.vguru .brand small{-webkit-text-fill-color:#a5bdd7;color:#a5bdd7;font-style:normal;filter:none;margin-top:4px}
.rg-bell{position:relative;display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;border:1px solid rgba(0,223,255,.4);background:rgba(7,28,53,.9);color:#ffd447;cursor:pointer;transition:box-shadow .2s}
.rg-bell:hover{box-shadow:0 0 14px rgba(255,212,71,.45)}
.rg-bell svg{width:24px;height:24px;fill:currentColor}
.rg-bell-n{position:absolute;top:4px;right:4px;min-width:18px;height:18px;padding:0 4px;border-radius:999px;background:#ff8a1f;color:#fff;font:800 11px/18px "Barlow",sans-serif;text-align:center;box-shadow:0 0 8px rgba(255,138,31,.8)}
@media (max-width:720px){body.vguru .brand{font-size:22px!important}body.vguru .brand small{display:none}.rg-bell{width:38px;height:38px;flex:0 0 auto}.rg-bell svg{width:20px;height:20px}}
@media (max-width:420px){body.vguru .brand{font-size:19px!important}}
@media (max-width:480px){body.vguru .meb{overflow:hidden;min-width:0}body.vguru .top-in{min-width:0}}
@media (min-width:1101px){.rg-stat{flex-wrap:nowrap;white-space:nowrap}.rg-gel select{max-width:150px}}
@media (max-width:720px){.rgh-kls{white-space:normal;max-width:100%;box-sizing:border-box}.rgh-tool .rg-btn{font-size:15px;padding:6px 10px}}
/* v19.48: menu pendaftaran dan log masuk pentadbir dalam Daftar Guru */
.regmenu{position:absolute;z-index:200;display:flex;flex-direction:column;gap:6px;padding:8px;border-radius:16px;background:#0b1530;border:1px solid rgba(0,223,255,.45);box-shadow:0 12px 30px rgba(0,0,0,.45),0 0 18px rgba(0,223,255,.2)}
.regmenu button{display:grid;grid-template-columns:36px 1fr;align-items:center;gap:0 10px;padding:10px 12px;border-radius:12px;border:1px solid rgba(165,189,215,.25);background:rgba(255,255,255,.04);color:#eef3ff;text-align:left;cursor:pointer;font:inherit}
.regmenu button:hover,.regmenu button:focus-visible{border-color:#29e6ff;background:rgba(41,230,255,.1);outline:none}
.regmenu i{grid-row:1/3;font-size:26px;font-style:normal;text-align:center}
.regmenu b{font-size:17px}.regmenu span{font-size:13px;color:#a5bdd7;line-height:1.25}
.rg-adm{margin-top:10px;padding:8px 10px;border-radius:12px;border:1px dashed rgba(165,189,215,.4)}
.rg-adm summary{cursor:pointer;font-weight:700;font-size:14px}
.rg-adm .card{margin-top:8px}