/*! Jejak Lamaran Tips - dibuat oleh Muhammad Faisal Irsyad (@mfaisalirsyad), 2026 */
/* Animasi memakai transform & opacity supaya ringan di HP. Tema kartu (Halloween, Wild West, Luar Angkasa) punya warna sendiri. */
:root{
  --bg:#f3f5f9; --sf:#ffffff; --sf2:#f7f8fb; --ln:#dde2ea; --ln2:#eceff4;
  --ink:#152033; --ink2:#334055; --mut:#5d6779; --acc:#2c56c9; --accs:#e9effc; --acc-ink:#ffffff;
  --ok:#17794a; --oks:#e4f4eb; --warn:#8d5b00; --warns:#fbf1dc; --bad:#b03a2e; --bads:#fbe9e7;
  --gold:#e8a317; --golds:#fdf3dc; --shadow:rgba(21,32,51,.12);
  --d1:#17794a; --d2:#2c56c9; --d3:#c27803; --d4:#b03a2e;
  --ff:'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0f141b; --sf:#171e28; --sf2:#1c2430; --ln:#2a3443; --ln2:#222b38;
  --ink:#e7ecf3; --ink2:#c3cad6; --mut:#94a0b2; --acc:#86a4f3; --accs:#1f2a44; --acc-ink:#0f141b;
  --ok:#5cc28d; --oks:#173226; --warn:#e0b25a; --warns:#33290f; --bad:#f08a7e; --bads:#3a1d1a;
  --gold:#f2c14e; --golds:#33290f; --shadow:rgba(0,0,0,.45);
  --d1:#5cc28d; --d2:#86a4f3; --d3:#e0b25a; --d4:#f08a7e; color-scheme:dark } }
:root[data-theme="dark"]{
  --bg:#0f141b; --sf:#171e28; --sf2:#1c2430; --ln:#2a3443; --ln2:#222b38;
  --ink:#e7ecf3; --ink2:#c3cad6; --mut:#94a0b2; --acc:#86a4f3; --accs:#1f2a44; --acc-ink:#0f141b;
  --ok:#5cc28d; --oks:#173226; --warn:#e0b25a; --warns:#33290f; --bad:#f08a7e; --bads:#3a1d1a;
  --gold:#f2c14e; --golds:#33290f; --shadow:rgba(0,0,0,.45);
  --d1:#5cc28d; --d2:#86a4f3; --d3:#e0b25a; --d4:#f08a7e; color-scheme:dark }

/* tema kartu: dipakai halaman Kartu Latihan dan panggung kartu */
.thm-halloween{ --tb1:#1c0b2b; --tb2:#3a1858; --tacc:#ff7a1a; --tacc2:#b48cff; --tcard:#fff6ec; --tink:#2a1238; --tmut:#7a5a86; --tframe:#ff7a1a; --tpanel:#2b1442; --tpanel2:#3a1d5c; --tpink:#f6ecff; --tline:rgba(255,255,255,.14); --tfont:'Creepster',cursive; --c1:#7a3db8; --c2:#ff7a1a; --c3:#c0392b }
.thm-west{ --tb1:#ecd5a4; --tb2:#c8925a; --tacc:#b5532a; --tacc2:#f2c14e; --tcard:#f6e7c4; --tink:#3a2310; --tmut:#7a5a3a; --tframe:#6b3e1d; --tpanel:#f3e2bc; --tpanel2:#e8d2a2; --tpink:#3a2310; --tline:rgba(58,35,16,.2); --tfont:'Rye',serif; --c1:#8a5530; --c2:#c46b2c; --c3:#a8321c }
.thm-space{ --tb1:#050818; --tb2:#1d1450; --tacc:#5ee7ff; --tacc2:#ff5ea8; --tcard:#0f1638; --tink:#e8f4ff; --tmut:#9fb2d8; --tframe:#5ee7ff; --tpanel:#111a44; --tpanel2:#18245a; --tpink:#e8f4ff; --tline:rgba(94,231,255,.22); --tfont:'Orbitron',sans-serif; --c1:#5ee7ff; --c2:#ff5ea8; --c3:#ffd166 }

*{box-sizing:border-box}
html,body{margin:0}
body{min-height:100vh; background:var(--bg); color:var(--ink); font-family:var(--ff); font-size:15px; line-height:1.5; -webkit-text-size-adjust:100%}
[hidden]{display:none!important}
.nojs{padding:24px; text-align:center}
button,input,select{font:inherit; color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--acc); outline-offset:2px}
h1,h2,h3{text-wrap:balance; margin:0}
a{color:var(--acc)}
svg.ic{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none}

/* ---------- header ---------- */
.top{position:sticky; top:env(safe-area-inset-top,0px); z-index:30; background:var(--sf); border-bottom:1px solid var(--ln)}
.top-in{max-width:1160px; margin:0 auto; padding:0 24px; display:flex; align-items:stretch; justify-content:space-between; gap:16px; min-height:60px}
.bwrap{position:relative; display:flex; align-items:center}
.brand{display:flex; align-items:center; gap:9px; font-weight:800; font-size:16.5px; white-space:nowrap; background:none; border:0; padding:0; color:var(--ink)}
.brand .lg{width:28px; height:28px; border-radius:6px; background:var(--acc); color:var(--acc-ink); display:flex; align-items:center; justify-content:center}
.brand .lg svg{stroke-width:3}
.brand .chev{color:var(--mut)}
.badge{font-size:11.5px; font-weight:800; color:var(--acc); background:var(--accs); border-radius:4px; padding:2px 7px}
.nav{display:flex; align-items:stretch; gap:22px}
.tabs{display:flex; gap:22px; align-items:stretch}
.tab{background:none; border:0; border-bottom:3px solid transparent; padding:3px 0 0; font-weight:600; font-size:14px; color:var(--mut); white-space:nowrap; display:flex; align-items:center; gap:6px}
.tab.on{color:var(--ink); border-bottom-color:var(--acc)}
.tab:hover{color:var(--ink)}
.tab .soon{font-size:10.5px; font-weight:700; color:var(--mut); background:var(--ln2); border-radius:4px; padding:1px 5px}
.tools{display:flex; align-items:center; gap:10px}
.vsep{width:1px; height:22px; background:var(--ln)}
.ib{background:none; border:0; padding:6px; border-radius:5px; color:var(--mut); display:flex}
.ib.on{color:var(--ink); background:var(--ln2)}
.ib:hover{color:var(--ink)}
.lang{background:none; border:0; font-size:12.5px; font-weight:700; color:var(--mut); padding:4px 3px}
.lang.on{color:var(--ink)}
.pts{display:flex; align-items:center; gap:6px; font-weight:800; font-size:13px; color:var(--warn); background:var(--golds); border-radius:999px; padding:4px 10px; white-space:nowrap}
.pts .star{width:14px; height:14px; fill:var(--gold); stroke:none}
.swm{position:absolute; top:calc(100% + 4px); left:0; z-index:40; width:300px; max-width:calc(100vw - 32px); background:var(--sf); border:1px solid var(--ln); border-radius:8px; box-shadow:0 12px 32px var(--shadow); padding:6px; display:flex; flex-direction:column; gap:2px}
.swi{display:flex; gap:10px; align-items:flex-start; padding:9px 10px; border-radius:6px; color:var(--ink); text-decoration:none; font-size:14px}
a.swi:hover{background:var(--sf2)}
.swi.here{background:var(--accs)}
.swi .sq{width:26px; height:26px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; flex:none}
.swi b{display:block}
.swi small{display:block; color:var(--mut); font-size:12.5px}
.swm .ft{font-size:12px; color:var(--mut); padding:8px 10px 4px; border-top:1px solid var(--ln2); margin-top:4px}

/* ---------- layout umum ---------- */
.wrap{max-width:1160px; margin:0 auto; padding:28px 24px 64px}
.sec{margin-top:36px}
.sec-h{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:14px}
.sec-h h2{font-size:21px; font-weight:800}
.sec-h p{margin:4px 0 0; color:var(--mut); font-size:14px; max-width:640px}
.lbl{font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--mut)}
.box{background:var(--sf); border:1px solid var(--ln); border-radius:10px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid var(--ln); background:var(--sf); border-radius:8px; padding:10px 16px; font-weight:700; font-size:14px; color:var(--ink); text-decoration:none; min-height:42px}
.btn:hover{border-color:var(--mut)}
.btn.pri{background:var(--acc); border-color:var(--acc); color:var(--acc-ink)}
.btn.pri:hover{filter:brightness(1.07)}
.btn.gold{background:var(--gold); border-color:var(--gold); color:#1d1a10}
.btn.ghost{background:none; border-color:transparent; color:var(--mut)}
.btn.ghost:hover{color:var(--ink)}
.btn[disabled]{opacity:.55; cursor:not-allowed; filter:none}
.btn.wide{width:100%}
.row2{display:flex; gap:8px} .row2 .btn{flex:1}
.note{font-size:13px; color:var(--mut); display:flex; gap:7px; align-items:flex-start; margin:8px 0 0}
.note svg{margin-top:2px}
.foot{border-top:1px solid var(--ln); color:var(--mut); font-size:13px; text-align:center; padding:22px 16px 34px}
.flash{animation:flash 1.5s ease-out}
@keyframes flash{0%{box-shadow:0 0 0 0 transparent; outline:2px solid transparent} 15%{outline:2px solid var(--acc); outline-offset:10px} 60%{outline:2px solid var(--acc); outline-offset:10px} 100%{outline:2px solid transparent; outline-offset:16px}}

/* ---------- beranda ---------- */
.home{overflow:clip}
.home .h2{font-size:24px; font-weight:800; margin-bottom:20px}
.home .sec{margin-top:64px}
.rv{transition:opacity .7s ease, translate .7s cubic-bezier(.2,.8,.3,1); transition-delay:var(--d,0ms)}
.rvon .rv:not(.in){opacity:0; translate:0 26px}
.hero{position:relative; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:36px; align-items:center; padding:20px 0 8px}
.hero::before{content:''; position:absolute; z-index:-1; width:520px; height:520px; right:-120px; top:-140px; border-radius:50%; background:radial-gradient(circle,var(--accs),transparent 68%); animation:glow 8s ease-in-out infinite alternate}
@keyframes glow{to{translate:-60px 40px; scale:1.15}}
.hero h1{font-size:42px; line-height:1.14; font-weight:800; letter-spacing:-.015em}
.hero h1 em{font-style:normal; color:var(--acc); background:linear-gradient(transparent 70%,var(--accs) 70%)}
.hero p.lead{font-size:16.5px; color:var(--ink2); margin:16px 0 24px; max-width:560px}
.hero .cta{display:flex; gap:10px; flex-wrap:wrap}
.btn.big{min-height:50px; padding:12px 22px; font-size:15px; border-radius:12px; transition:transform .2s, box-shadow .2s}
.btn.big:hover{transform:translateY(-2px); box-shadow:0 10px 22px var(--shadow)}
.hero-art{position:relative; height:320px; --mx:0; --my:0}
.hero-art .hc{position:absolute; width:172px; height:236px; left:50%; top:50%; filter:drop-shadow(0 18px 26px var(--shadow)); transition:transform .5s cubic-bezier(.2,.8,.3,1)}
.hero-art .hc>div{width:100%; height:100%; animation:float 5s ease-in-out infinite alternate}
.hero-art .hc svg{width:100%; height:100%; display:block}
.hc.c1{transform:translate(calc(-122% + var(--mx)*-34px),calc(-46% + var(--my)*-24px)) rotate(-12deg)}
.hc.c2{transform:translate(calc(20% + var(--mx)*-22px),calc(-54% + var(--my)*-16px)) rotate(10deg)}
.hc.c2>div{animation-delay:-1.6s}
.hc.c3{transform:translate(calc(-50% + var(--mx)*18px),calc(-50% + var(--my)*14px)) rotate(-1deg)}
.hc.c3>div{animation-delay:-3.2s; animation-duration:6s}
.hero-art:hover .hc.c1{transform:translate(calc(-140% + var(--mx)*-34px),calc(-48% + var(--my)*-24px)) rotate(-18deg)}
.hero-art:hover .hc.c2{transform:translate(calc(38% + var(--mx)*-22px),calc(-56% + var(--my)*-16px)) rotate(16deg)}
@keyframes float{from{translate:0 0; rotate:0deg} to{translate:0 -12px; rotate:2deg}}
.sp{position:absolute; width:18px; height:18px; background:var(--gold); clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%); animation:twk 2.4s ease-in-out infinite}
.sp.s1{left:8%; top:12%} .sp.s2{right:6%; top:70%; animation-delay:-.8s; width:12px; height:12px} .sp.s3{left:46%; top:2%; animation-delay:-1.6s; width:14px; height:14px; background:var(--acc)}
@keyframes twk{0%,100%{scale:.4; opacity:.3} 50%{scale:1.1; opacity:1}}
.stats{display:flex; gap:22px; margin-top:28px; max-width:520px}
.stat{min-width:0; flex:1 1 0; padding-left:14px; border-left:3px solid var(--acc)}
.stat b{display:block; font-size:24px; font-weight:800}
.stat span{font-size:13px; color:var(--mut)}
/* fitur: tanpa kotak */
.feats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px}
.feat{position:relative; background:none; border:0; padding:6px 0 14px; display:flex; flex-direction:column; gap:8px; text-align:left; color:var(--ink)}
.feat::after{content:''; position:absolute; left:0; bottom:0; height:3px; width:36px; border-radius:2px; background:var(--ln); transition:width .4s cubic-bezier(.2,.8,.3,1), background .3s}
.feat:hover::after{width:100%; background:var(--acc)}
.feat .fi{width:54px; height:54px; border-radius:18px; display:flex; align-items:center; justify-content:center; background:var(--accs); color:var(--acc); transition:transform .45s cubic-bezier(.3,1.6,.5,1), border-radius .45s}
.feat:hover .fi{transform:rotate(-8deg) scale(1.1); border-radius:50%}
.feat.ft2 .fi{background:var(--golds); color:var(--warn)} .feat.ft3 .fi{background:var(--oks); color:var(--ok)}
.feat .fi svg{width:24px; height:24px}
.feat h3{font-size:17px; font-weight:800; margin-top:4px}
.feat p{margin:0; color:var(--mut); font-size:14px}
.feat .tg{align-self:flex-start; font-size:11.5px; font-weight:700; border-radius:999px; padding:2px 9px; background:var(--ln2); color:var(--mut)}
/* cara kerja: garis waktu */
#how{border-radius:16px; padding:6px; margin-left:-6px; margin-right:-6px; scroll-margin-top:90px}
.tl{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; position:relative; counter-reset:x}
.tl::before{content:''; position:absolute; left:24px; right:24px; top:23px; height:3px; border-radius:2px; background:linear-gradient(90deg,var(--acc),var(--gold)); opacity:.35}
.st{position:relative; display:flex; flex-direction:column; gap:4px}
.st .n{position:relative; width:48px; height:48px; border-radius:50%; background:var(--acc); color:var(--acc-ink); font-weight:800; font-size:19px; display:flex; align-items:center; justify-content:center; margin-bottom:10px; box-shadow:0 0 0 6px var(--bg)}
.st .n::after{content:''; position:absolute; inset:-6px; border-radius:50%; border:2px solid var(--acc); opacity:0; animation:ring 2.8s ease-out infinite}
.st:nth-child(2) .n::after{animation-delay:.7s} .st:nth-child(3) .n::after{animation-delay:1.4s} .st:nth-child(4) .n::after{animation-delay:2.1s}
.st:nth-child(4) .n{background:var(--gold); color:#1d1a10}
@keyframes ring{0%{opacity:.7; scale:.9} 100%{opacity:0; scale:1.5}}
.st b{font-size:16px}
.st p{margin:0; color:var(--mut); font-size:14px}
/* pesan HR (biru) & testimoni (oranye): kartu blob */
.blob{position:relative; margin:0; z-index:0; transition:scale .5s cubic-bezier(.3,1.6,.5,1)}
.blob::before{content:''; position:absolute; inset:0; z-index:-1; border-radius:24px; background:var(--bb); box-shadow:0 12px 28px var(--bsh); transition:border-radius .5s, inset .5s}
.blob:hover{scale:1.05; z-index:3}
.blob:hover::before{inset:-6px; animation:slime 2.6s ease-in-out infinite}
@keyframes slime{0%,100%{border-radius:38px 64px 46px 72px / 66px 40px 74px 44px} 25%{border-radius:64px 40px 70px 46px / 44px 70px 42px 66px} 50%{border-radius:46px 72px 40px 64px / 72px 46px 64px 38px} 75%{border-radius:70px 46px 64px 40px / 40px 64px 46px 72px}}
.blob .bi{position:relative; padding:22px; display:flex; flex-direction:column; gap:14px; height:100%}
.blob .phd{position:absolute; top:14px; right:14px; font-size:11px; font-weight:700; border-radius:999px; padding:1px 8px; background:rgba(255,255,255,.22)}
.blob blockquote{margin:0; font-size:15px; display:flex; gap:8px; color:inherit}
.blob .qm{width:20px; height:20px; margin-top:1px; flex:none; opacity:.75}
.blob figcaption b{display:block; font-size:14.5px}
.blob figcaption span{font-size:13px; opacity:.82}
.hrc{--bb:linear-gradient(150deg,#2c56c9,#4a7ef0); --bsh:rgba(44,86,201,.28); color:#fff}
.hrc .av{width:58px; height:58px; border-radius:50%; background:rgba(255,255,255,.18); color:#fff; display:flex; align-items:center; justify-content:center}
.hrc .av svg{width:26px; height:26px}
.hrg{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:22px 20px}
.hrc{grid-column:span 2}
.hrc:nth-child(4){grid-column:2 / span 2}
.tsc{--bb:linear-gradient(150deg,#f39a3d,#ffc27a); --bsh:rgba(225,120,30,.26); color:#3b1a00}
.tsc .phd{background:rgba(255,255,255,.4)}
.tsc .av.sm{width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.55); color:#7a3600; font-weight:800; display:flex; align-items:center; justify-content:center; flex:none}
.tsc figcaption{display:flex; gap:10px; align-items:center}
.tsc .bi{justify-content:space-between; min-height:190px}
.slider{display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding:20px 12px 26px; margin:-20px -12px -10px}
.slider::-webkit-scrollbar{display:none}
.tsc{flex:0 0 calc((100% - 40px)/3); scroll-snap-align:start}
.sl-nav{display:flex; gap:8px}
.sl-b{border:0; background:#fde3c8; color:#8a3d00; width:42px; height:42px; display:flex; justify-content:center; align-items:center; border-radius:50%; transition:transform .25s, background .2s}
.sl-b:hover{transform:scale(1.12); background:#ffc27a}
.dots{display:flex; gap:7px; justify-content:center; margin-top:8px}
.dot{width:8px; height:8px; padding:0; border-radius:4px; border:0; background:var(--ln); transition:width .3s,background .3s}
.dot.on{width:26px; background:#f39a3d}
/* tautan */
.links{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px}
.lk{position:relative; display:flex; gap:16px; align-items:center; padding:14px 0 18px; text-decoration:none; color:var(--ink); border-bottom:2px solid var(--ln)}
.lk::after{content:''; position:absolute; left:0; bottom:-2px; height:2px; width:0; background:var(--acc); transition:width .45s cubic-bezier(.2,.8,.3,1)}
.lk:hover::after{width:100%}
.lk .sq{width:46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; flex:none; transition:transform .45s cubic-bezier(.3,1.6,.5,1)}
.lk:hover .sq{transform:rotate(-8deg) scale(1.08)}
.lk .lt{flex:1; min-width:0}
.lk b{display:block; font-size:16px}
.lk .lt span{font-size:13.5px; color:var(--mut)}
.lk .ar{width:22px; height:22px; color:var(--mut); transition:transform .3s, color .3s}
.lk:hover .ar{transform:translateX(6px); color:var(--acc)}

/* ---------- halaman kartu (bertema) ---------- */
/* hiasan bergerak di halaman kartu */
.kw{position:relative; overflow:clip}
.kw>.wrap{position:relative; z-index:1}
.kdeco{position:absolute; inset:0; pointer-events:none; z-index:0}
.kdeco i{position:absolute; left:-80px; width:46px; height:24px; background:no-repeat center/contain; animation:kfly 18s linear infinite, flap .28s ease-in-out infinite alternate}
.kdeco i:nth-child(1){top:90px} .kdeco i:nth-child(2){top:230px; animation-delay:-6s,-.1s; width:34px; height:18px; animation-duration:22s,.24s}
.kdeco i:nth-child(3){top:420px; animation-delay:-11s,0s; width:28px; height:15px; animation-duration:26s,.3s} .kdeco i:nth-child(4){top:160px; animation-delay:-15s,-.2s; animation-duration:20s,.26s}
@keyframes kfly{0%{translate:0 0} 25%{translate:30vw -30px} 50%{translate:60vw 20px} 75%{translate:90vw -24px} 100%{translate:calc(100vw + 160px) 0}}
@keyframes flap{from{scale:1 1} to{scale:1 .45}}
.thm-halloween .kdeco i{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32'%3E%3Cpath d='M32 9c2-4 4-4 4-4l1 4c6-6 14-8 26-4-6 2-8 8-8 12-4-3-8-3-11 1-2-3-5-4-7-3-1 2-3 3-5 3s-4-1-5-3c-2-1-5 0-7 3-3-4-7-4-11-1 0-4-2-10-8-12 12-4 20-2 26 4l1-4s2 0 4 4z' fill='%23120718'/%3E%3C/svg%3E")}
.thm-west .kdeco i{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32'%3E%3Cpath d='M2 10q16-4 30 12q14-16 30-12' stroke='%235a3317' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); opacity:.7}
.thm-space .kdeco i{width:140px!important; height:2px!important; background:linear-gradient(90deg,transparent,#fff); border-radius:2px; animation:shoot 7s linear infinite!important; left:auto; right:-160px; opacity:0}
.thm-space .kdeco i:nth-child(2){animation-delay:-2.5s!important} .thm-space .kdeco i:nth-child(3){animation-delay:-4.6s!important} .thm-space .kdeco i:nth-child(4){display:none}
@keyframes shoot{0%{translate:0 0; rotate:-25deg; opacity:0} 4%{opacity:1} 14%{translate:-70vw 34vw; opacity:0} 100%{translate:-70vw 34vw; opacity:0}}
.kdeco b{position:absolute; top:0; right:0; width:170px; height:170px; background:no-repeat top right/contain}
.thm-halloween .kdeco b{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg stroke='%23e9dcff' stroke-opacity='.28' fill='none' stroke-width='.8'%3E%3Cpath d='M100 0L20 0M100 0L30 40M100 0L60 70M100 0L100 80M100 0L0 12'/%3E%3Cpath d='M86 0q-2 8 6 10q4 6 8 6M72 0q-4 14 10 18q6 10 18 12M56 0q-6 20 16 26q8 16 28 18M40 0q-8 28 24 36q10 22 36 26'/%3E%3C/g%3E%3C/svg%3E")}
.thm-halloween .kdeco b::after{content:''; position:absolute; right:58px; top:0; width:24px; height:150px; background:no-repeat bottom/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 150'%3E%3Cpath d='M12 0v128' stroke='%23e9dcff' stroke-opacity='.5'/%3E%3Cg stroke='%23120718' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M8 134l-7-4M8 138h-8M8 141l-7 4M16 134l7-4M16 138h8M16 141l7 4'/%3E%3C/g%3E%3Cellipse cx='12' cy='139' rx='5' ry='6' fill='%23120718'/%3E%3Ccircle cx='12' cy='131' r='3.5' fill='%23120718'/%3E%3Ccircle cx='10.8' cy='130.6' r='.9' fill='%23ff7a1a'/%3E%3Ccircle cx='13.2' cy='130.6' r='.9' fill='%23ff7a1a'/%3E%3C/svg%3E"); transform-origin:50% 0; animation:hang 4s ease-in-out infinite}
@keyframes hang{0%,100%{translate:0 -40px; rotate:-3deg} 50%{translate:0 0; rotate:3deg}}
.thm-west .kdeco b{width:150px; height:150px; top:-50px; right:-50px; border-radius:50%; background:radial-gradient(circle,rgba(255,236,170,.9) 0 30%,rgba(255,220,140,.35) 31%,transparent 70%); animation:glow 6s ease-in-out infinite alternate}
.thm-space .kdeco b{width:96px; height:96px; top:-30px; right:-30px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#b9a8ff,#7a5cff 50%,#2b1a7a); box-shadow:0 0 40px rgba(122,92,255,.5); animation:float 7s ease-in-out infinite alternate}
.thm-space .kdeco b::after{content:''; position:absolute; left:-30px; right:-30px; top:38px; height:14px; border-radius:50%; border:2px solid rgba(255,209,102,.7); rotate:-14deg}
.kw{background:linear-gradient(180deg,var(--tb1),var(--tb2)); color:var(--tpink); min-height:calc(100vh - 61px)}
.kw .wrap{padding-top:22px}
.kw .lbl{color:var(--tpink); opacity:.75}
.kw .ph{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap}
.kw .ph p{margin:4px 0 0; opacity:.85}
.ttl{font-family:var(--tfont), var(--ff); font-weight:400; font-size:38px; line-height:1.1; letter-spacing:.01em; color:var(--tpink)}
.thm-west .ttl{color:#5a3317; text-shadow:0 2px 0 rgba(255,246,224,.6)}
.thm-west.stage .stg-top{color:#3a2310} .thm-west.stage .stg-top .x{background:rgba(58,35,16,.18); color:#3a2310} .thm-west .hint{color:#3a2310; text-shadow:0 1px 2px rgba(255,255,255,.6)}
.thm-space .ttl{font-weight:700; font-size:30px; letter-spacing:.04em}
.back{display:inline-flex; align-items:center; gap:6px; background:none; border:0; color:inherit; opacity:.8; font-weight:600; padding:4px 0; margin-bottom:12px}
.back:hover{opacity:1}
.thp{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.thb{display:flex; align-items:center; gap:10px; border:1px solid var(--tline); background:rgba(255,255,255,.06); color:inherit; border-radius:999px; padding:7px 16px 7px 8px; font-weight:700; font-size:13px}
.thb .tsw{width:22px; height:30px; display:block}
.thb .tsw svg{width:100%; height:100%; display:block}
.thb.on{border-color:var(--tacc); background:rgba(255,255,255,.14); box-shadow:0 0 0 2px var(--tacc) inset}
.thm-west .thb{background:rgba(255,255,255,.35); color:#3a2310}
.thm-west .thb.on{background:#fff4dc}
.klay{display:grid; grid-template-columns:minmax(0,1fr) 120px; gap:22px; align-items:start}
.kmain{min-width:0}
.kmain .sec{margin-top:24px}
.kmain .sec-h p{color:inherit; opacity:.8}
.deck{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:22px; align-items:center; padding:20px; border-radius:14px; background:var(--tpanel); color:var(--tpink); border:1px solid var(--tline); margin-top:10px}
.thm-west .deck{color:#3a2310; box-shadow:0 6px 0 #b98b52}
.deck .stack{position:relative; width:84px; height:115px}
.deck .stack i{position:absolute; inset:0; display:block}
.deck .stack i svg{width:100%; height:100%; display:block; filter:drop-shadow(0 4px 6px rgba(0,0,0,.35))}
.deck .stack i:nth-child(1){transform:rotate(-9deg) translate(-5px,2px)}
.deck .stack i:nth-child(2){transform:rotate(6deg) translate(4px,0)}
.deck h2{font-size:19px; font-weight:800}
.deck .meta{display:flex; gap:14px; flex-wrap:wrap; font-size:13.5px; margin-top:4px; opacity:.85}
.deck .note,.deck .lock{color:inherit}
.bar{height:8px; border-radius:6px; background:rgba(127,127,127,.25); overflow:hidden; margin-top:10px; max-width:420px}
.bar i{display:block; height:100%; background:var(--tacc); border-radius:6px; transition:width .5s ease}
.deck .act{display:flex; flex-direction:column; gap:8px; min-width:200px}
.kw .btn.pri{background:var(--tacc); border-color:var(--tacc); color:#16081f}
.thm-west .btn.pri{color:#fff8ea}
.kw .btn.ghost{color:inherit; opacity:.8}
.kw .btn:not(.pri):not(.ghost){background:rgba(255,255,255,.1); color:inherit; border-color:var(--tline)}
.lock{display:flex; gap:12px; align-items:center; padding:12px 14px; background:rgba(0,0,0,.18); border:1px dashed var(--tline); border-radius:10px; font-size:14px; margin-top:12px}
.lock svg{width:20px; height:20px; opacity:.8}
.thm-west .lock{background:rgba(255,255,255,.4)}
.donelist{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px}
.dch{border:1px solid var(--tline); background:rgba(255,255,255,.08); color:inherit; border-radius:6px; padding:3px 8px; font-size:12.5px; font-weight:600; display:flex; gap:5px; align-items:center}
.thm-west .dch{background:rgba(255,255,255,.6);border-color:rgba(90,50,20,.45)}
.dch i{width:8px; height:8px; border-radius:50%}
.dch i.d1{background:#5cc28d} .dch i.d2{background:#86a4f3} .dch i.d3{background:#e0b25a} .dch i.d4{background:#f08a7e}
.search{display:flex; align-items:center; gap:8px; border:1px solid var(--tline); background:rgba(255,255,255,.08); border-radius:8px; padding:0 12px; min-width:240px}
.thm-west .search{background:rgba(255,255,255,.5)}
.search input{border:0; background:none; outline:none; padding:10px 0; width:100%; color:inherit}
.search input::placeholder{color:inherit; opacity:.6}
.chips{display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; margin-top:12px}
.chips::-webkit-scrollbar{display:none}
.chip{border:1px solid var(--tline); background:rgba(255,255,255,.06); border-radius:999px; padding:6px 13px; font-size:13.5px; font-weight:600; white-space:nowrap; color:inherit}
.chip.on{background:var(--tacc); border-color:var(--tacc); color:#16081f}
.thm-west .chip{background:rgba(255,255,255,.4)} .thm-west .chip.on{color:#fff8ea}
.roles{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:14px}
.role{padding:14px; text-align:left; display:flex; flex-direction:column; gap:6px; min-height:118px; color:inherit; position:relative; border-radius:12px; border:1px solid var(--tline); background:var(--tpanel)}
.role:hover:not(.soon){border-color:var(--tacc); box-shadow:0 0 0 1px var(--tacc), 0 8px 18px rgba(0,0,0,.25)}
.role{transition:box-shadow .2s,border-color .2s}
.role b{font-size:15px; padding-right:52px}
.role .c{font-size:12.5px; opacity:.75}
.role .bar{margin-top:auto; height:6px}
.role .rp{font-size:12.5px; opacity:.85}
.role.soon{background:transparent; border-style:dashed; cursor:default; opacity:.6}
.role .tg{position:absolute; top:12px; right:12px; font-size:11px; font-weight:700; border-radius:4px; padding:1px 6px; background:rgba(127,127,127,.25)}
.role .tg.ok{background:#5cc28d; color:#0b2a18}
.locked .roles{opacity:.4; pointer-events:none; filter:grayscale(.4)}
.empty{padding:22px; text-align:center; opacity:.8}
.kw .lv{background:rgba(255,255,255,.9)}

/* bar poin vertikal 0-150 dengan hadiah rahasia */
.pbar{position:sticky; top:84px; display:flex; flex-direction:column; align-items:center; gap:12px; padding:18px 10px; margin-top:56px; border-radius:14px; background:var(--tpanel); border:1px solid var(--tline)}
.thm-west .pbar{color:#3a2310}
.pbar .pv{font-weight:800; font-size:20px; display:flex; align-items:center; gap:4px}
.pbar .pv small{font-size:12px; opacity:.7}
.trk{position:relative; width:14px; height:480px; border-radius:8px; background:rgba(127,127,127,.25)}
.trk>i{position:absolute; left:0; right:0; bottom:0; height:var(--p); border-radius:8px; background:linear-gradient(0deg,var(--tacc),var(--tacc2)); transition:height .8s cubic-bezier(.2,.8,.3,1)}
.mk{position:absolute; left:50%; bottom:var(--at); transform:translate(-50%,50%); display:flex; align-items:center; gap:6px}
.mk b{width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px; background:var(--tpanel2); border:2px dashed var(--tline); color:inherit}
.mk em{position:absolute; left:38px; font-style:normal; font-size:11.5px; font-weight:700; opacity:.7}
.mk.got b{background:var(--gold); border:2px solid #fff3c4; color:#3a2a00; box-shadow:0 0 12px rgba(242,193,78,.6)}
.mk:not(.got) b{animation:wob 2.4s ease-in-out infinite}
@keyframes wob{0%,100%{transform:rotate(0)} 50%{transform:rotate(8deg) scale(1.06)}}

/* tingkat kesulitan */
.lv{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:800; border-radius:999px; padding:3px 10px 3px 4px; background:var(--sf2); border:1px solid var(--ln)}
.lv .n{width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:12px}
.lv.l1{color:#17794a} .lv.l2{color:#2c56c9} .lv.l3{color:#a86200} .lv.l4{color:#b03a2e}
.lv.l1 .n{background:#17794a} .lv.l2 .n{background:#2c56c9} .lv.l3 .n{background:#c27803} .lv.l4 .n{background:#b03a2e}
.lv .pp{display:flex; gap:2px} .lv .pp i{width:6px; height:6px; border-radius:2px; background:#d5dae3}
.lv.l1 .pp i:nth-child(-n+1),.lv.l2 .pp i:nth-child(-n+2),.lv.l3 .pp i:nth-child(-n+3),.lv.l4 .pp i:nth-child(-n+4){background:currentColor}
.tt{font-size:12px; font-weight:700; border-radius:4px; padding:2px 7px; background:rgba(127,127,127,.18)}

/* ---------- panggung ---------- */
.stage{position:fixed; inset:0; z-index:60; background:linear-gradient(180deg,var(--tb1),var(--tb2)); color:var(--tpink); display:flex; flex-direction:column; align-items:center; overflow:auto; overscroll-behavior:contain}
.ptc{position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:0}
.dim1{position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:1; pointer-events:none}
.dim2{position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:5; pointer-events:none}
.stg-top{position:relative; z-index:20; width:100%; max-width:860px; display:flex; justify-content:space-between; align-items:center; padding:14px 16px; gap:12px; color:#fff}
.stg-top .t{font-weight:700; font-size:14px; opacity:.92; text-shadow:0 1px 3px rgba(0,0,0,.5)}
.stg-b{display:flex; gap:8px}
.stg-top .x{background:rgba(255,255,255,.14); border:0; color:#fff; border-radius:8px; padding:7px 12px; font-weight:700; font-size:13px; display:flex; align-items:center; gap:6px; backdrop-filter:blur(4px)}
.stg-top .x:hover{background:rgba(255,255,255,.24)}
.arena{position:relative; z-index:2; width:100%; max-width:860px; height:520px; flex:none; margin:auto 0; display:flex; align-items:center; justify-content:center; touch-action:manipulation; perspective:1100px}
.hint{position:absolute; left:0; right:0; bottom:0; text-align:center; color:#fff; font-weight:700; font-size:15px; text-shadow:0 1px 4px rgba(0,0,0,.6); padding:0 16px}
.cd{position:absolute; left:50%; top:0; transform:translateX(-50%); color:#fff; font-weight:800; font-size:26px; width:56px; height:56px; border-radius:50%; background:rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center; z-index:9}
.cd.big{font-size:40px; color:#ffd166}
.cd.beat{animation:beat .9s ease-out}
@keyframes beat{0%{transform:translateX(-50%) scale(.7)} 35%{transform:translateX(-50%) scale(1.45)} 70%{transform:translateX(-50%) scale(1.05)} 100%{transform:translateX(-50%) scale(1.2)}}

/* kartu belakang (3D) */
.pc{position:absolute; width:150px; height:206px; left:50%; top:50%; margin:-103px 0 0 -75px; will-change:transform; transform-style:preserve-3d}
.pc .bk{position:absolute; inset:0; border-radius:14px; box-shadow:0 12px 26px rgba(0,0,0,.45)}
.pc .bk svg{width:100%; height:100%; display:block; border-radius:14px}
.pc.sm{position:relative; left:auto; top:auto; margin:0; width:84px; height:115px}
.pc.sm .bk,.pc.sm .bk svg{border-radius:9px}
.pc.xs{width:96px; height:132px; margin:-62px 0 0 -48px}
.pc.pick{cursor:pointer}
.pc.pick:hover .bk{box-shadow:0 0 0 3px #ffd166,0 12px 26px rgba(0,0,0,.45)}
.pc.hl .bk{box-shadow:0 0 0 4px #ffd166,0 0 28px rgba(255,209,102,.75)}
.pc.dim{opacity:.3}
.table3d{position:relative; width:240px; height:260px; transform-style:preserve-3d; transform:rotateX(52deg) rotateZ(-6deg)}
.fan3d{position:relative; width:100%; height:100%; transform-style:preserve-3d}
/* dadu 3D */
.drow{position:absolute; left:0; right:0; top:44%; display:flex; justify-content:center; gap:18px}
.drow .pc{position:relative; left:auto; top:auto; margin:0}
.dice3d{position:absolute; left:50%; top:4%; width:112px; height:112px; margin-left:-56px; perspective:700px; z-index:4}
.cube{position:relative; width:112px; height:112px; transform-style:preserve-3d}
.df{position:absolute; inset:0; border-radius:20px; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); padding:16px; background:radial-gradient(circle at 30% 25%,#fff,#e9e4f2); box-shadow:inset 0 0 0 2px rgba(0,0,0,.08), inset 0 -10px 18px rgba(0,0,0,.16), inset 0 8px 12px rgba(255,255,255,.6); backface-visibility:hidden}
.df i{width:20px; height:20px; border-radius:50%; place-self:center; visibility:hidden; background:#1b1426; box-shadow:inset 0 3px 3px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.5)}
.df i.on{visibility:visible}
.f1{transform:translateZ(56px)} .f6{transform:rotateY(180deg) translateZ(56px)} .f3{transform:rotateY(90deg) translateZ(56px)} .f4{transform:rotateY(-90deg) translateZ(56px)} .f5{transform:rotateX(-90deg) translateZ(56px)} .f2{transform:rotateX(90deg) translateZ(56px)}
.thm-halloween .df{background:radial-gradient(circle at 30% 25%,#ffc48a,#ff7a1a 70%,#d95f00)} .thm-halloween .df i{background:#2a0f00}
.thm-west .df{background:radial-gradient(circle at 30% 25%,#fffaf0,#e9dcc2 70%,#d2bf98)} .thm-west .df i{background:#a8321c}
.thm-space .df{background:radial-gradient(circle at 30% 25%,#d6f9ff,#5ee7ff 70%,#2fb6d6)} .thm-space .df i{background:#1d1450}
.dsh{position:absolute; left:50%; bottom:-30px; width:104px; height:18px; margin-left:-52px; border-radius:50%; background:rgba(0,0,0,.42); filter:blur(5px)}
/* roda */
.wwrap{position:absolute; inset:0 0 34px; display:flex; align-items:center; justify-content:center; gap:30px}
.wcol{display:flex; flex-direction:column; gap:8px}
.wwrap .pc.sm{width:80px; height:110px}
.wmid{position:relative; display:flex; align-items:center; justify-content:center}
.wheel{will-change:transform; filter:drop-shadow(0 14px 24px rgba(0,0,0,.5))}
.wheel svg{width:100%; height:100%; display:block}
.wptr{position:absolute; top:-20px; left:50%; margin-left:-16px; width:0; height:0; border-left:16px solid transparent; border-right:16px solid transparent; border-top:30px solid #ffd166; filter:drop-shadow(0 2px 3px rgba(0,0,0,.5)); z-index:2; transform-origin:50% 0}
.wptr.tick{animation:tick .15s ease-out}
@keyframes tick{0%{transform:rotate(0)} 40%{transform:rotate(-14deg)} 100%{transform:rotate(0)}}
/* tutup */
.cup{position:absolute; left:50%; top:50%; width:150px; height:125px; margin:-112px 0 0 -75px; will-change:transform; z-index:3}
.cup svg{width:100%; height:100%; filter:drop-shadow(0 12px 12px rgba(0,0,0,.45)); overflow:visible}
.cup .rim{fill:none; stroke:var(--tacc); stroke-width:2.5; stroke-linejoin:round; opacity:.9}
.cup.pick{cursor:pointer}
.cup.pick:hover svg{filter:drop-shadow(0 0 12px #ffd166) drop-shadow(0 12px 12px rgba(0,0,0,.45))}
/* gosok */
.scrg{display:grid; grid-template-columns:repeat(4,172px); gap:18px; justify-content:center; user-select:none; -webkit-user-select:none}
.scrg.n3{grid-template-columns:repeat(3,172px)} .scrg.n2{grid-template-columns:repeat(2,172px)} .scrg.n1{grid-template-columns:172px}
.scr{position:relative; width:172px; height:236px; border-radius:16px; background:var(--tcard); color:var(--tink); box-shadow:0 14px 30px rgba(0,0,0,.45); overflow:hidden; border:4px solid var(--tframe); user-select:none; -webkit-user-select:none; -webkit-touch-callout:none}
.sface{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; pointer-events:none}
.sface .big{font-size:64px; font-weight:800; line-height:1; color:var(--tframe); font-family:var(--tfont),var(--ff)}
.sface .clue{font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; background:rgba(127,127,127,.18); padding:3px 10px; border-radius:999px}
.scr canvas{position:absolute; inset:0; width:100%; height:100%; touch-action:none; cursor:grab; -webkit-user-drag:none}
.sbar{position:absolute; left:12px; right:12px; bottom:10px; height:6px; border-radius:3px; background:rgba(0,0,0,.25); z-index:2; pointer-events:none}
.sbar i{display:block; height:100%; width:0; border-radius:3px; background:#ffd166; transition:width .2s}
/* plinko */
.plk{position:relative; width:380px; height:400px; flex:none}
.plk .peg{position:absolute; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%; background:var(--tacc); box-shadow:0 0 10px var(--tacc)}
.plk .ball{position:absolute; width:26px; height:26px; margin:-13px 0 0 -13px; border-radius:50%; background:radial-gradient(circle at 35% 35%,#fff3c4,#e8a317 60%,#a86f00); box-shadow:0 3px 6px rgba(0,0,0,.4); will-change:transform; left:0; top:0}
.plk .slts{position:absolute; left:0; right:0; bottom:0; height:60px; border:2px solid var(--tline); border-radius:0 0 14px 14px; display:flex; background:rgba(0,0,0,.2)}
.plk .slt{flex:1; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:21px; color:#fff; border-left:2px solid var(--tline)}
.plk .slt:first-child{border-left:0}
.plk .slt.hit{background:rgba(255,209,102,.35); color:#ffd166}
/* kartu terbang */
.arena>.flyc{position:absolute; left:50%; top:50%; margin:-58px 0 0 -42px}
.flyc .wg{position:absolute; top:22%; width:62px; height:40px; background:linear-gradient(180deg,#7a45b8,#2b1442); z-index:-1; animation:wflap .22s ease-in-out infinite alternate}
.flyc .wg.l{right:92%; transform-origin:100% 50%; clip-path:polygon(100% 10%,70% 0,40% 8%,0 30%,14% 52%,30% 44%,38% 72%,56% 58%,68% 90%,100% 80%)}
.flyc .wg.r{left:92%; transform-origin:0 50%; clip-path:polygon(0 10%,30% 0,60% 8%,100% 30%,86% 52%,70% 44%,62% 72%,44% 58%,32% 90%,0 80%)}
@keyframes wflap{from{transform:rotate(-26deg) scaleY(1)} to{transform:rotate(18deg) scaleY(.7)}}
.flyc .wg.r{animation-name:wflap2}
@keyframes wflap2{from{transform:rotate(26deg) scaleY(1)} to{transform:rotate(-18deg) scaleY(.7)}}
.thm-west .flyc .wg{background:linear-gradient(180deg,#8a5530,#4f2c12)}
.thm-west .flyc .wg.l{clip-path:polygon(100% 20%,60% 0,0 18%,20% 34%,4% 46%,30% 56%,16% 70%,52% 74%,100% 86%)}
.thm-west .flyc .wg.r{clip-path:polygon(0 20%,40% 0,100% 18%,80% 34%,96% 46%,70% 56%,84% 70%,48% 74%,0 86%)}
.thm-space .flyc .wg.r{display:none}
.thm-space .flyc .wg.l{right:auto; left:50%; top:96%; width:34px; height:58px; margin-left:-17px; transform-origin:50% 0; clip-path:polygon(20% 0,80% 0,100% 30%,70% 60%,50% 100%,30% 60%,0 30%); background:linear-gradient(180deg,#fff3c4,#ffd166 30%,#ff7a1a 65%,rgba(255,94,168,0)); animation:flame .12s ease-in-out infinite alternate}
@keyframes flame{from{transform:scaleY(.8) scaleX(1.05)} to{transform:scaleY(1.15) scaleX(.9)}}
.flyc.caught .bk{animation:caught .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes caught{0%{scale:1} 50%{scale:1.25} 100%{scale:1.1}}
/* ramalan */
.orbw{position:relative; width:100%; height:100%}
.orbc{position:absolute; left:50%; top:50%; width:180px; height:180px; margin:-90px 0 0 -90px; filter:drop-shadow(0 12px 24px rgba(0,0,0,.5)); z-index:1}
.orbc svg{width:100%; height:100%; display:block}
.thm-halloween .orbc{animation:orbglow 1.6s ease-in-out infinite alternate}
@keyframes orbglow{from{filter:drop-shadow(0 0 10px rgba(180,140,255,.4))} to{filter:drop-shadow(0 0 34px rgba(180,140,255,.95))}}
.orbc .mist{animation:mist 2.4s ease-in-out infinite alternate}
@keyframes mist{from{translate:-6px 4px} to{translate:6px -6px}}
.orbw .pc.sm{position:absolute; margin:0; z-index:2}
.needle{position:absolute; left:50%; top:50%; width:14px; height:128px; margin:-128px 0 0 -7px; transform-origin:50% 100%; z-index:3; background:linear-gradient(180deg,#ffd166,#e8a317 70%,transparent); clip-path:polygon(50% 0,100% 100%,0 100%); filter:drop-shadow(0 0 6px rgba(255,209,102,.8))}
.thm-west .needle{background:linear-gradient(180deg,#a8321c,#a8321c 70%,transparent)}
.beam{position:absolute; left:50%; top:50%; width:340px; height:340px; margin:-170px 0 0 -170px; border-radius:50%; z-index:0; background:conic-gradient(from -14deg,rgba(94,231,255,.6) 0 28deg,transparent 28deg); -webkit-mask:radial-gradient(circle,#000 20%,transparent 70%); mask:radial-gradient(circle,#000 20%,transparent 70%)}
/* pancing */
.pond{position:absolute; left:3%; right:3%; top:96px; bottom:40px; border-radius:50% / 26%; background:radial-gradient(ellipse at 50% 30%,rgba(255,255,255,.14),transparent 60%),linear-gradient(180deg,#2a6f6a,#123c44); box-shadow:inset 0 10px 30px rgba(0,0,0,.4); overflow:hidden}
.pond::before,.pond::after{content:''; position:absolute; left:10%; right:10%; top:22%; height:8px; border-radius:50%; border-top:2px solid rgba(255,255,255,.25); animation:wave 3s ease-in-out infinite alternate}
.pond::after{top:58%; left:22%; right:30%; animation-delay:-1.5s}
@keyframes wave{to{translate:30px 0; scale:1.1 1}}
.thm-halloween .pond{background:radial-gradient(ellipse at 50% 30%,rgba(94,227,90,.18),transparent 60%),linear-gradient(180deg,#2e3a1c,#1a0b2b)}
.thm-west .pond{background:radial-gradient(ellipse at 50% 30%,rgba(255,255,255,.25),transparent 60%),linear-gradient(180deg,#5d8ea0,#2f5a68); border:6px solid #8a5530}
.thm-space .pond{background:radial-gradient(ellipse at 40% 40%,rgba(255,94,168,.35),transparent 55%),radial-gradient(ellipse at 70% 60%,rgba(94,231,255,.3),transparent 55%),#0b1030}
.pond ~ .pc.sm{position:absolute; left:50%; top:0; margin-left:-42px; z-index:2}
.hook{position:absolute; left:50%; top:-60px; width:26px; margin-left:-13px; z-index:4}
.hook svg{width:26px; height:40px; display:block; filter:drop-shadow(0 2px 2px rgba(0,0,0,.5))}
.hook .ln{position:absolute; left:12px; bottom:calc(100% - 2px); width:2px; height:700px; background:rgba(255,255,255,.75)}
.thm-west .hook .ln{background:rgba(58,35,16,.75)}

/* kartu soal: bentuk kartu sungguhan + poin kunci bertema */
.qwrap{position:relative; z-index:6; width:100%; max-width:660px; padding:26px 16px 40px; display:flex; flex-direction:column; gap:18px; margin:auto 0}
.qwrap.wait{visibility:hidden}
.qwrap.wait .kpanel{opacity:0}
.qwrap.show .kpanel{animation:cardin .45s .1s ease-out both}
.qcard{position:relative; border-radius:22px; background:var(--tcard); color:var(--tink); padding:12px; box-shadow:0 26px 60px rgba(0,0,0,.55); border:5px solid var(--tframe)}
.qc-in{position:relative; border:1.5px dashed var(--tframe); border-radius:14px; padding:26px 50px 46px; overflow:hidden; min-height:300px}
.qc-in>*:not(.pip):not(.wm){position:relative; z-index:1}
.pip{position:absolute; display:flex; flex-direction:column; align-items:center; gap:0; z-index:1; color:var(--tframe); font-family:var(--tfont),var(--ff); line-height:1}
.pip svg{width:24px; height:24px; display:block}
.pip b{font-size:22px; font-weight:400; margin-top:2px}
.thm-space .pip b{font-weight:700; font-size:18px}
.pip.tl{top:10px; left:12px}
.pip.br{bottom:10px; right:12px; transform:rotate(180deg)}
.wm{position:absolute; left:50%; top:50%; width:230px; height:230px; margin:-115px 0 0 -115px; opacity:.08; pointer-events:none}
.wm svg{width:100%; height:100%; display:block}
.thm-space .wm{opacity:.14}
.thm-halloween .qcard{background:linear-gradient(180deg,#fff6ec,#ffe3c4); box-shadow:0 0 0 3px #3a1858, 0 0 34px rgba(255,122,26,.45), 0 26px 60px rgba(0,0,0,.6)}
.thm-halloween .qc-in{border-color:rgba(122,61,184,.55)}
.thm-west .qcard{background:linear-gradient(180deg,#f8ecce,#efdcae); border:7px double #6b3e1d; box-shadow:0 26px 60px rgba(0,0,0,.5), inset 0 0 44px rgba(122,74,38,.28)}
.thm-west .qc-in{border-style:solid; border-color:rgba(107,62,29,.45)}
.thm-west .pip{color:#a8321c}
.thm-space .qcard{background:linear-gradient(160deg,#16205a,#0b1030); box-shadow:0 0 0 1px rgba(94,231,255,.4), 0 0 46px rgba(94,231,255,.3), 0 26px 60px rgba(0,0,0,.6)}
.thm-space .qc-in{border-color:rgba(94,231,255,.4)}
.qcard .hd{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.qcard .no{margin-left:auto; font-size:12.5px; font-weight:700; color:var(--tmut)}
.qcard h2{font-size:25px; line-height:1.34; font-weight:800; margin:20px 0 2px; color:var(--tink)}
.thm-west .qcard h2{font-family:'Rye',serif; font-weight:400; font-size:23px; line-height:1.4}
.thm-space .qcard h2{letter-spacing:.005em}
.qcard .vis{margin-top:16px}
/* kartu yang terbang lalu dibalik */
.qflip{position:fixed; z-index:8; transform-style:preserve-3d; will-change:transform; pointer-events:none}
.qflip .ff,.qflip .fb{position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden}
.qflip .ff .qcard{height:100%; margin:0}
.qflip .fb{transform:rotateY(180deg); border-radius:22px; overflow:hidden; box-shadow:0 26px 60px rgba(0,0,0,.55)}
.qflip .fb svg{width:100%; height:100%; display:block}
/* hiasan tema di kartu soal */
.bird{position:absolute; top:-40px; right:34px; width:66px; height:46px; z-index:3; animation:birdin 1.7s cubic-bezier(.3,.7,.3,1) .2s both, bob 2.6s ease-in-out 2.2s infinite}
.bird svg{width:100%; height:100%; display:block; overflow:visible}
.bird .wg{transform-origin:30px 22px; animation:bflap .14s ease-in-out 12 alternate .2s}
.bird .wg2{transform-origin:34px 22px; animation:bflap2 .14s ease-in-out 12 alternate .2s}
@keyframes birdin{from{translate:-340px -260px; rotate:12deg} 80%{translate:0 -10px; rotate:-4deg} to{translate:0 0; rotate:0deg}}
@keyframes bob{0%,90%,100%{translate:0 0} 94%{translate:0 -6px}}
@keyframes bflap{from{transform:rotate(0)} to{transform:rotate(38deg) scaleY(.6)}}
@keyframes bflap2{from{transform:rotate(0)} to{transform:rotate(-38deg) scaleY(.6)}}
.spider{position:absolute; top:-6px; left:-26px; width:48px; height:48px; z-index:3; transform-origin:50% -300px; animation:spdown 2.2s cubic-bezier(.3,.8,.3,1) .3s both, swing 3.2s ease-in-out 2.5s infinite alternate}
.spider svg{width:100%; height:100%; display:block; position:relative}
.spider .th{position:absolute; left:50%; bottom:70%; width:1.5px; height:420px; background:rgba(255,255,255,.55)}
@keyframes spdown{from{translate:0 -340px} 70%{translate:0 70px} to{translate:0 54px}}
@keyframes swing{from{rotate:-4deg} to{rotate:4deg}}
.sat{position:absolute; top:-30px; right:-26px; width:64px; height:32px; z-index:3; animation:satin 1.4s ease-out .2s both, satf 4s ease-in-out 1.6s infinite alternate}
.sat svg{width:100%; height:100%; display:block}
@keyframes satin{from{translate:200px -160px; rotate:40deg; opacity:0} to{translate:0 0; rotate:-12deg; opacity:1}}
@keyframes satf{from{translate:0 0; rotate:-12deg} to{translate:-10px 10px; rotate:6deg}}
/* panel poin kunci mengikuti tema */
.kpanel{position:relative; background:var(--tpanel); color:var(--tpink); border:1px solid var(--tline); border-radius:18px; padding:18px; box-shadow:0 16px 36px rgba(0,0,0,.4)}
.thm-halloween .kpanel{border-top:3px solid var(--tacc); background:linear-gradient(180deg,#341850,#24103a)}
.thm-west .kpanel{border:2px solid #6b3e1d; background:linear-gradient(180deg,#f6e7c4,#ecd6a6); box-shadow:0 16px 36px rgba(0,0,0,.35), inset 0 0 30px rgba(122,74,38,.18)}
.thm-space .kpanel{background:rgba(14,22,62,.94); border-color:rgba(94,231,255,.45); box-shadow:0 0 26px rgba(94,231,255,.2), 0 16px 36px rgba(0,0,0,.45)}
.kpanel .lbl{color:inherit; opacity:.8; font-family:var(--tfont),var(--ff); letter-spacing:.06em; font-size:14px; font-weight:400}
.thm-space .kpanel .lbl{font-size:12px; font-weight:700}
.kpanel .note{color:inherit; opacity:.8}
.stage .btn.pri{background:var(--tacc); border-color:var(--tacc); color:#16081f}
.thm-west.stage .btn.pri{color:#fff8ea}
.stage .btn:not(.pri){background:rgba(255,255,255,.08); color:inherit; border-color:var(--tline)}
.thm-west.stage .btn:not(.pri){background:rgba(255,255,255,.45)}
.stage .stg-top .x{background:rgba(255,255,255,.14)}
.stg-top .t small{display:block; font-size:12px; font-weight:600; opacity:.8}
.info{display:flex; gap:10px; align-items:flex-start; background:var(--accs); border-radius:10px; padding:12px 14px; font-size:14px; margin-bottom:12px}
.info svg{color:var(--acc); margin-top:2px}
.info .btn{min-height:32px; padding:5px 12px; font-size:13px; margin-left:auto; flex:none}
.keys{margin-bottom:12px}
.keys .note{margin:2px 0 6px}
.kp{display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border:1px solid var(--ln); border-radius:9px; margin-top:8px; cursor:pointer}
.kp input{width:18px; height:18px; margin:2px 0 0; accent-color:var(--ok); flex:none}
.kp.on{border-color:var(--ok); background:var(--oks)}
.qact{display:flex; gap:10px; flex-wrap:wrap}
.qact .btn{flex:1 1 200px}
.gain{flex-basis:100%; display:flex; align-items:center; gap:12px; background:var(--golds); border-radius:10px; padding:12px 14px; font-weight:700}
.gain .v{font-size:24px; font-weight:800; color:var(--warn)}
.gain small{font-weight:600; color:var(--mut)}
.gain.old{background:var(--sf2); color:var(--mut); font-weight:600}
.pop{animation:pop .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop{from{transform:scale(.6); opacity:0} to{transform:scale(1); opacity:1}}

/* visual dalam kartu */
.chart{width:100%; height:auto; display:block; background:rgba(127,127,127,.08); border:1px solid var(--tline); border-radius:10px}
.chart text{font-family:var(--ff); fill:var(--tmut); font-size:13px}
.chart .vl{fill:var(--tink); font-weight:700}
.chart .ax{stroke:var(--tline)}
.legend{display:flex; gap:14px; flex-wrap:wrap; font-size:12.5px; color:var(--tmut); margin-top:6px}
.legend i{display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:5px; vertical-align:-1px}
.vt{font-size:13px; font-weight:700; color:var(--tmut); margin-bottom:6px}
.tw{overflow-x:auto}
.tbl{width:100%; border-collapse:collapse; font-size:14px; border:1px solid var(--tline); border-radius:10px; overflow:hidden}
.tbl th,.tbl td{padding:8px 12px; border-bottom:1px solid var(--tline); text-align:left}
.tbl th{font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--tmut)}
.tbl tr:last-child td{border-bottom:0}
.tbl td:last-child{font-variant-numeric:tabular-nums}
.code{background:#0f1720; color:#e3e9f2; border-radius:10px; padding:14px 16px; font:13.5px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; overflow:auto; white-space:pre; margin:0}

/* isi panel poin kunci di panggung */
.stage .info{background:rgba(255,255,255,.08); color:inherit}
.thm-west.stage .info{background:rgba(255,255,255,.45)}
.stage .info svg{color:var(--tacc)}
.stage .kp{border-color:var(--tline); background:rgba(255,255,255,.04); transition:border-color .2s, background .2s, transform .2s}
.stage .kp:hover{transform:translateX(3px)}
.thm-west.stage .kp{background:rgba(255,255,255,.35)}
.stage .kp input{accent-color:var(--tacc)}
.stage .kp.on{border-color:var(--tacc); background:color-mix(in srgb,var(--tacc) 20%,transparent)}
.stage .gain{background:color-mix(in srgb,var(--tacc2) 18%,transparent); color:inherit; border:1px solid color-mix(in srgb,var(--tacc2) 45%,transparent)}
.stage .gain .v{color:var(--tacc2); font-family:var(--tfont),var(--ff); font-weight:400; font-size:28px}
.thm-west.stage .gain .v{color:#a8321c}
.thm-space.stage .gain .v{font-weight:700}
.stage .gain small{color:inherit; opacity:.75}
.stage .gain.old{background:rgba(127,127,127,.15); border-color:transparent; color:inherit; opacity:.85}

/* ---------- perayaan (mengikuti tema) ---------- */
.fx{position:fixed; inset:0; z-index:80; pointer-events:none; width:100%; height:100%}
.cele{position:fixed; inset:0; z-index:85; display:flex; align-items:center; justify-content:center; background:rgba(10,10,24,.62); padding:16px; overflow:auto}
.cele .cb{background:var(--tpanel); color:var(--tpink); border:2px solid var(--tacc); border-radius:22px; padding:26px 24px; max-width:440px; width:100%; text-align:center; box-shadow:0 24px 60px rgba(0,0,0,.5); position:relative; overflow:hidden; margin:auto}
.thm-halloween .cb{background:linear-gradient(180deg,#3a1d5c,#1c0b2b)}
.thm-west .cb{background:linear-gradient(180deg,#f6e7c4,#e8d2a2); border:6px double #6b3e1d}
.thm-space .cb{background:linear-gradient(180deg,#18245a,#070b24); box-shadow:0 0 40px rgba(94,231,255,.3), 0 24px 60px rgba(0,0,0,.5)}
.cele h2{font-family:var(--tfont),var(--ff); font-weight:400; font-size:32px; margin:6px 0 6px; letter-spacing:.02em}
.thm-space .cele h2,.cele.thm-space h2{font-weight:700; font-size:24px}
.cele p{margin:0 0 18px; color:inherit; opacity:.85}
.cele .btn.pri{background:var(--tacc); border-color:var(--tacc); color:#16081f}
.cele.thm-west .btn.pri{color:#fff8ea}
.cele .btn:not(.pri){background:rgba(255,255,255,.1); color:inherit; border-color:var(--tline)}
.burst{position:relative; width:240px; height:240px; margin:-26px auto -18px; display:grid; place-items:center}
.burst .rays{position:absolute; left:0; top:0; width:100%; height:100%; border-radius:50%; background:repeating-conic-gradient(var(--ray) 0 10deg, transparent 10deg 20deg); -webkit-mask:radial-gradient(circle,#000 28%,transparent 70%); mask:radial-gradient(circle,#000 28%,transparent 70%); animation:spin 7s linear infinite, breathe 1.1s ease-in-out infinite alternate}
.thm-halloween .burst{--ray:rgba(255,122,26,.45)} .thm-west .burst{--ray:rgba(242,193,78,.55)} .thm-space .burst{--ray:rgba(94,231,255,.42)}
.burst.silver{--ray:rgba(200,212,230,.5)!important}
.medal{position:relative; z-index:1; grid-area:1/1; width:112px; height:112px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; color:#2a1400; background:radial-gradient(circle at 35% 30%,#fff3c4,#f2c14e 55%,#c98a00); box-shadow:0 0 0 6px rgba(255,255,255,.18), 0 0 0 9px rgba(0,0,0,.12), 0 10px 24px rgba(0,0,0,.4)}
.medal .mi svg{width:30px; height:30px; display:block}
.medal b{font-family:var(--tfont),var(--ff); font-weight:400; font-size:34px; line-height:1}
.thm-space .medal b{font-weight:700; font-size:28px}
.thm-halloween .medal{background:radial-gradient(circle at 35% 30%,#ffd9a8,#ff7a1a 58%,#b84d00); border:3px dashed #3a1858}
.thm-west .medal{background:radial-gradient(circle at 35% 30%,#fff3c4,#f2c14e 55%,#9a6a10); border:3px solid #6b3e1d; clip-path:polygon(50% 0,61% 12%,76% 6%,80% 22%,95% 25%,89% 40%,100% 50%,89% 60%,95% 75%,80% 78%,76% 94%,61% 88%,50% 100%,39% 88%,24% 94%,20% 78%,5% 75%,11% 60%,0 50%,11% 40%,5% 25%,20% 22%,24% 6%,39% 12%)}
.thm-space .medal{background:radial-gradient(circle at 35% 30%,#e8f4ff,#5ee7ff 55%,#3a6fd8); color:#071030; box-shadow:0 0 0 6px rgba(94,231,255,.25), 0 0 30px rgba(94,231,255,.6)}
.burst.silver .medal{background:radial-gradient(circle at 35% 30%,#ffffff,#c7d0dd 55%,#8794a8); color:#1c2433}
@keyframes spin{to{rotate:360deg}}
@keyframes breathe{from{scale:.72} to{scale:1.18}}
.shine{animation:shine 1.2s ease-out}
@keyframes shine{0%{transform:scale(.3) rotate(-30deg); opacity:0} 60%{transform:scale(1.15) rotate(8deg); opacity:1} 100%{transform:scale(1) rotate(0)}}
.dart{position:relative; margin:4px auto 14px; width:290px; max-width:100%}
.dart canvas{width:100%; height:auto; display:block; touch-action:manipulation; cursor:crosshair; border-radius:14px}
.dart .sc{font-weight:800; font-size:16px; margin-top:8px; font-family:var(--tfont),var(--ff)}

/* mode perayaan (150 poin) */
html.fest .top{border-bottom:2px solid var(--gold)}
html.fest .brand .lg{background:linear-gradient(145deg,#f2c14e,#c98a00); color:#1d1a10}
.festbar{display:flex; align-items:center; gap:10px; justify-content:center; background:linear-gradient(90deg,#f2c14e,#ffdf8a,#f2c14e); color:#1d1a10; font-weight:800; font-size:13px; padding:6px 12px}
.crown{width:16px; height:16px}

/* ---------- modal, toast ---------- */
.ov{position:fixed; inset:0; z-index:90; background:rgba(10,16,30,.5); display:flex; align-items:center; justify-content:center; padding:16px}
.mbox{background:var(--sf); border-radius:14px; width:100%; max-width:460px; padding:22px; box-shadow:0 24px 60px rgba(0,0,0,.35); max-height:calc(100dvh - 32px); overflow:auto}
.mbox .mh{display:flex; justify-content:space-between; align-items:center; margin-bottom:12px}
.mbox h2{font-size:19px; font-weight:800}
.row{display:flex; gap:12px; align-items:flex-start; justify-content:space-between; padding:14px 0; border-top:1px solid var(--ln2)}
.row b{display:block; font-size:14.5px}
.row small{display:block; color:var(--mut); font-size:13px}
.sw{position:relative; width:44px; height:26px; flex:none; border-radius:999px; background:var(--ln); border:0; transition:background .2s}
.sw::after{content:''; position:absolute; left:3px; top:3px; width:20px; height:20px; border-radius:50%; background:#fff; transition:transform .2s; box-shadow:0 1px 3px rgba(0,0,0,.25)}
.sw.on{background:var(--acc)}
.sw.on::after{transform:translateX(18px)}
.sw[disabled]{opacity:.45}
.danger{color:var(--bad)!important; border-color:var(--bad)!important}
.inp{width:100%; border:1px solid var(--ln); background:var(--sf); border-radius:8px; padding:10px 12px; margin:10px 0}
.toast{position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:95; background:var(--ink); color:var(--sf); padding:10px 16px; border-radius:9px; font-weight:600; font-size:14px; max-width:calc(100vw - 32px); box-shadow:0 8px 24px var(--shadow)}

/* ---------- responsif ---------- */
@media (max-height:700px) and (min-width:821px){ .arena{height:470px} }
@media (max-width:1000px){
  .roles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tsc{flex-basis:calc((100% - 20px)/2)}
  .tl{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tl::before{display:none}
}
@media (max-width:820px){
  .top-in{flex-wrap:wrap; padding:0 16px; gap:0; min-height:0}
  .bwrap{min-height:54px}
  .nav{display:contents}
  .tools{gap:6px}
  .tabs{order:3; width:100%; overflow-x:auto; gap:20px; scrollbar-width:none; min-height:44px}
  .tabs::-webkit-scrollbar{display:none}
  .wrap{padding:20px 16px 56px}
  .home .sec{margin-top:48px}
  .hero{grid-template-columns:1fr; gap:10px}
  .hero::before{width:320px; height:320px; right:-120px; top:-60px}
  .hero h1{font-size:30px}
  .hero-art{height:230px; order:-1}
  .hero-art .hc{width:124px; height:170px}
  .feats{grid-template-columns:1fr; gap:22px}
  .feat{display:grid; grid-template-columns:54px minmax(0,1fr); column-gap:16px; row-gap:4px}
  .feat .fi{grid-row:1 / span 3}
  .feat::after{left:70px}
  .tl{grid-template-columns:1fr; gap:18px}
  .tl::before{display:block; left:23px; right:auto; top:24px; bottom:24px; width:3px; height:auto; background:linear-gradient(180deg,var(--acc),var(--gold))}
  .st{display:grid; grid-template-columns:48px minmax(0,1fr); column-gap:16px}
  .st .n{grid-row:1 / span 2; margin:0}
  .st b{align-self:end}
  .links{grid-template-columns:1fr; gap:12px}
  .hrg{grid-template-columns:1fr; gap:18px}
  .hrc,.hrc:nth-child(4){grid-column:auto}
  .tsc{flex-basis:84%}
  .blob:hover{scale:1.02}
  .klay{grid-template-columns:1fr}
  .pbar{position:relative; top:auto; order:-1; flex-direction:row; padding:14px 16px 26px; margin-top:10px}
  .trk{width:auto; flex:1; height:12px}
  .trk>i{right:auto; top:0; bottom:0; width:var(--p); height:auto}
  .mk{bottom:50%; left:var(--at); transform:translate(-50%,50%)}
  .mk em{left:50%; top:30px; transform:translateX(-50%)}
  .mk b{width:24px; height:24px; font-size:12px}
  .mk em{font-size:10.5px}
  .pbar .lbl{display:none}
  .roles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .deck{grid-template-columns:auto minmax(0,1fr); gap:16px}
  .deck .act{grid-column:1 / -1; min-width:0}
  .search{min-width:0; width:100%}
  .ttl{font-size:30px}
  .kdeco b{width:110px; height:110px}
  .arena{height:460px}
  .pc{width:110px; height:151px; margin:-75px 0 0 -55px}
  .pc.sm{width:64px; height:88px}
  .arena>.flyc{margin:-44px 0 0 -32px}
  .flyc .wg{width:42px; height:28px}
  .pond ~ .pc.sm{margin-left:-32px}
  .pc.xs{width:76px; height:104px; margin:-50px 0 0 -38px}
  .drow{gap:10px}
  .drow .pc.sm{width:74px; height:102px}
  .dice3d,.cube{width:92px; height:92px} .dice3d{margin-left:-46px}
  .f1{transform:translateZ(46px)} .f6{transform:rotateY(180deg) translateZ(46px)} .f3{transform:rotateY(90deg) translateZ(46px)} .f4{transform:rotateY(-90deg) translateZ(46px)} .f5{transform:rotateX(-90deg) translateZ(46px)} .f2{transform:rotateX(90deg) translateZ(46px)}
  .df{padding:13px; border-radius:16px} .df i{width:16px; height:16px}
  .wwrap{gap:10px}
  .wwrap .pc.sm{width:52px; height:72px}
  .cup{width:104px; height:87px; margin:-80px 0 0 -52px}
  .scrg,.scrg.n3,.scrg.n4{grid-template-columns:repeat(2,140px); gap:12px}
  .scr{width:140px; height:184px}
  .sface .big{font-size:50px}
  .plk{transform:scale(.86)}
  .orbc{width:120px; height:120px; margin:-60px 0 0 -60px}
  .needle{height:88px; margin:-88px 0 0 -6px; width:12px}
  .beam{width:260px; height:260px; margin:-130px 0 0 -130px}
  .orbw .pc.sm{width:58px; height:80px}
  .pond{top:80px}
  .qwrap{padding:30px 12px 32px}
  .qcard{padding:8px; border-width:4px}
  .qc-in{padding:22px 30px 40px; min-height:240px}
  .pip svg{width:18px; height:18px} .pip b{font-size:17px}
  .pip.tl{top:7px; left:8px} .pip.br{bottom:7px; right:8px}
  .qcard h2{font-size:20px}
  .thm-west .qcard h2{font-size:19px}
  .wm{width:170px; height:170px; margin:-85px 0 0 -85px}
  .bird{width:54px; height:38px; top:-34px; right:22px}
  .spider{left:-14px; width:32px; height:32px}
  .sat{right:-12px; width:52px; height:26px}
  .burst{width:210px; height:210px}
  .pts .tx{display:none}
}
@media (max-width:420px){
  .brand{font-size:15px}
  .tools .vsep{display:none}
  .g4{grid-template-columns:1fr}
  .roles{gap:10px}
  .role{min-height:108px; padding:12px}
  .wcol{gap:6px}
  .wwrap .pc.sm{width:46px; height:63px}
  .drow .pc.sm{width:68px; height:94px}
  .scrg,.scrg.n3{grid-template-columns:repeat(2,132px)}
  .scr{width:132px; height:176px}
}
@media (prefers-reduced-motion:reduce){ .pop,.cardin,.shine,.burst .rays,.flipin,.mk b,.cd.beat,.qwrap.show .kpanel,.kdeco i,.kdeco b,.kdeco b::after,.hero-art .hc>div,.sp,.st .n::after,.hero::before,.bird,.bird .wg,.bird .wg2,.spider,.sat,.flyc .wg,.orbc,.pond::before,.pond::after{animation:none} .rvon .rv:not(.in){opacity:1; translate:none} }
.dice3d ~ .cd{left:calc(50% + 120px); top:36px}
@media (max-width:820px){ .dice3d ~ .cd{left:calc(50% + 96px); top:24px} }
@media (max-width:820px){ #how{margin-left:0; margin-right:0; padding:10px 8px} #how.flash{animation:flashm 1.5s ease-out} }
@keyframes flashm{0%{outline:2px solid transparent; outline-offset:0} 15%,60%{outline:2px solid var(--acc); outline-offset:0} 100%{outline:2px solid transparent; outline-offset:6px}}

/* ===== revisi 4: kartu soal berbentuk kartu (rasio 120 x 164, sama dengan kartu belakang) ===== */
.qwrap{max-width:480px}
.qcard{width:100%; aspect-ratio:120/164; border-radius:10% / 7.32%; display:flex; flex-direction:column; padding:12px}
.qc-in{flex:1; min-height:0; border-radius:calc(10% - 4px) / calc(7.32% - 4px); padding:30px 34px 48px; display:flex; flex-direction:column}
.qcard h2{font-size:23px; margin:22px 0 4px}
.thm-west .qcard h2{font-size:21px}
.qcard .vis{margin-top:14px}
.qcard .chart text{font-size:14px}
.qcard.long h2{font-size:21px}
.wm{width:260px; height:260px; margin:-130px 0 0 -130px; opacity:.035}
.thm-space .wm{opacity:.06}
.qflip .fb{border-radius:0; box-shadow:none; overflow:visible}
.qflip .fb svg{filter:drop-shadow(0 26px 40px rgba(0,0,0,.5))}
.qflip .ff .qcard{width:100%; height:100%; aspect-ratio:auto}
@media (max-width:820px){
  .qwrap{max-width:420px}
  .qcard{padding:8px}
  .qc-in{padding:26px 22px 40px}
  .qcard h2{font-size:19px; margin-top:16px}
  .thm-west .qcard h2{font-size:18px}
  .qcard.long h2{font-size:16.5px}
  .wm{width:190px; height:190px; margin:-95px 0 0 -95px}
}
/* chip aktif di tema West */
.thm-west .chip.on{background:var(--tacc); border-color:var(--tacc); color:#fff8ea}
/* footer, sama seperti Jejak Lamaran */
.foot{border-top:1px solid var(--ln); background:var(--sf); color:var(--mut); font-size:13px; text-align:left; padding:0}
.foot-in{max-width:1160px; margin:0 auto; padding:18px 24px; display:flex; justify-content:space-between; align-items:center; gap:8px 16px; flex-wrap:wrap}
.foot-in a{color:var(--ink2); font-weight:700; text-decoration:none}
.foot-in a:hover{color:var(--acc); text-decoration:underline}
@media (max-width:820px){ .foot-in{padding:18px 16px} }
.qc-in>h2:last-child{margin-top:auto; margin-bottom:auto; padding-bottom:20px; text-align:center; font-size:26px}
.thm-west .qc-in>h2:last-child{font-size:24px}
@media (max-width:820px){ .qc-in>h2:last-child{font-size:21px} .thm-west .qc-in>h2:last-child{font-size:20px} }

/* ===== revisi 5 ===== */
/* hiasan kartu soal: digerakkan JS (datang, singgah, pergi) */
.qcard .bird,.qcard .spider,.qcard .sat{position:absolute; top:0; left:0; right:auto; animation:none!important; opacity:0; will-change:transform,opacity; pointer-events:none}
.qcard .bird{width:66px; height:46px}
.qcard .bird .wg,.qcard .bird .wg2{animation:none!important}
.qcard .bird.fly .wg{animation:bflap .13s ease-in-out infinite alternate!important}
.qcard .bird.fly .wg2{animation:bflap2 .13s ease-in-out infinite alternate!important}
.qcard .spider{width:44px; height:44px; transform-origin:50% -260px}
.qcard .spider .th{height:1200px; bottom:60%}
.qcard .sat{width:64px; height:32px}
@media (max-width:820px){ .qcard .bird{width:54px; height:38px} .qcard .spider{width:36px; height:36px} .qcard .sat{width:52px; height:26px} }

/* tema Polos */
.thm-plain{ --tb1:var(--bg); --tb2:var(--ln2); --tacc:var(--acc); --tacc2:var(--gold); --tcard:var(--sf); --tink:var(--ink); --tmut:var(--mut); --tframe:var(--acc); --tpanel:var(--sf); --tpanel2:var(--sf2); --tpink:var(--ink); --tline:var(--ln); --tfont:'Plus Jakarta Sans',sans-serif; --c1:var(--acc); --c2:var(--gold); --c3:var(--bad) }
.thm-plain .ttl{font-weight:800; font-size:34px; letter-spacing:-.01em; color:var(--ink)}
.thm-plain .btn.pri,.thm-plain.stage .btn.pri,.cele.thm-plain .btn.pri{color:var(--acc-ink)}
.thm-plain .chip.on{color:var(--acc-ink)}
.thm-plain .thb{background:var(--sf); color:var(--ink)}
.thm-plain .thb.on{background:var(--accs)}
.thm-plain .deck,.thm-plain .role:not(.soon),.thm-plain .pbar{box-shadow:0 4px 14px rgba(21,32,51,.06)}
.thm-plain .kw .btn:not(.pri):not(.ghost),.kw.thm-plain .btn:not(.pri):not(.ghost){background:var(--sf)}
.thm-plain.stage .stg-top{color:var(--ink)} .thm-plain.stage .stg-top .x{background:var(--ln2); color:var(--ink)}
.thm-plain .hint{color:var(--ink); text-shadow:none}
.thm-plain .cd{background:var(--acc); color:var(--acc-ink)}
.thm-plain .dim1{background:rgba(21,32,51,.08)} .thm-plain .dim2{background:rgba(21,32,51,.28)}
.thm-plain .qcard{background:var(--sf); border:3px solid var(--acc); box-shadow:0 22px 50px rgba(21,32,51,.22)}
.thm-plain .qc-in{border:1px solid var(--ln)}
.thm-plain .pip{color:var(--acc)}
.thm-plain .wm{opacity:.04}
.thm-plain .kpanel{background:var(--sf); border:1px solid var(--ln); box-shadow:0 14px 34px rgba(21,32,51,.14)}
.thm-plain.stage .btn:not(.pri){background:var(--sf)}
.thm-plain .df{background:radial-gradient(circle at 30% 25%,var(--sf),var(--ln2) 70%,var(--ln))} .thm-plain .df i{background:var(--acc)}
.thm-plain .flyc .wg{background:linear-gradient(180deg,var(--sf),var(--ln))}
.thm-plain .flyc .wg.l{clip-path:polygon(100% 20%,60% 0,0 18%,20% 34%,4% 46%,30% 56%,16% 70%,52% 74%,100% 86%)}
.thm-plain .flyc .wg.r{clip-path:polygon(0 20%,40% 0,100% 18%,80% 34%,96% 46%,70% 56%,84% 70%,48% 74%,0 86%)}
.thm-plain .pond{background:radial-gradient(ellipse at 50% 30%,rgba(255,255,255,.5),transparent 60%),linear-gradient(180deg,#bcd3f2,#86a4f3)}
.thm-plain .hook .ln{background:rgba(21,32,51,.6)}
.thm-plain .needle{background:linear-gradient(180deg,var(--acc),var(--acc) 70%,transparent); filter:none}
.thm-plain .plk .slt{color:var(--ink)} .thm-plain .plk .slts{background:var(--sf2)}
.thm-plain .sface .clue{background:var(--accs); color:var(--acc)}
.thm-plain .burst{--ray:rgba(232,163,23,.4)}
.cele.thm-plain .cb{background:var(--sf); border:1px solid var(--ln)}
.cele.thm-plain h2{font-weight:800; font-size:26px}
.thm-plain .medal b{font-weight:800}
.thm-plain .stage .info,.thm-plain.stage .info{background:var(--sf2)}

/* halaman role: kartu yang sudah dijawab */
.minis{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:16px; margin-top:16px}
.mini{position:relative; aspect-ratio:120/164; border-radius:10% / 7.32%; border:3px solid var(--tframe); background:var(--tcard); color:var(--tink); padding:30px 14px; display:flex; align-items:center; justify-content:center; text-align:center; box-shadow:0 10px 22px rgba(0,0,0,.25); transition:transform .3s cubic-bezier(.3,1.6,.5,1), box-shadow .3s; overflow:hidden}
.mini:hover{transform:translateY(-6px) rotate(-1.5deg); box-shadow:0 18px 30px rgba(0,0,0,.3)}
.mini .mq{font-size:13.5px; font-weight:700; line-height:1.4; display:-webkit-box; -webkit-line-clamp:7; -webkit-box-orient:vertical; overflow:hidden}
.thm-west .mini .mq{font-family:'Rye',serif; font-weight:400; font-size:12.5px}
.mini .pip{position:absolute; color:var(--tframe)} .mini .pip svg{width:16px; height:16px} .mini .pip b{font-size:14px}
.mini .pip.tl{top:7px; left:8px} .mini .pip.br{bottom:7px; right:8px; transform:rotate(180deg)}
.thm-halloween .mini{background:linear-gradient(180deg,#fff6ec,#ffe3c4)}
.thm-west .mini{background:linear-gradient(180deg,#f8ecce,#efdcae); border:4px double #6b3e1d}
.thm-west .mini .pip{color:#a8321c}
.thm-space .mini{background:linear-gradient(160deg,#16205a,#0b1030); border-color:#5ee7ff; box-shadow:0 0 18px rgba(94,231,255,.25)}
.thm-plain .mini{background:var(--sf); border-color:var(--acc); box-shadow:0 6px 16px rgba(21,32,51,.1)}
@media (max-width:820px){ .minis{grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px} }

/* panduan */
.help{position:relative; display:flex}
.help-panel{position:absolute; right:-60px; top:calc(100% + 10px); width:300px; max-width:calc(100vw - 32px); background:var(--sf); border:1px solid var(--ln); border-radius:8px; box-shadow:0 12px 32px var(--shadow); z-index:45; text-align:left}
.np-head{padding:12px 14px; border-bottom:1px solid var(--ln)} .np-head b{font-size:14.5px}
.help-intro{margin:0; padding:10px 16px 6px; font-size:13px; color:var(--mut); line-height:1.5}
.help-list{list-style:none; margin:0; padding:6px 8px 10px}
.help-list button{display:flex; width:100%; justify-content:space-between; align-items:center; gap:10px; border:0; background:none; padding:10px; border-radius:8px; color:var(--ink); text-align:left}
.help-list button:hover{background:var(--ln2)}
.help-list button.on .hl-n{color:var(--acc)}
.hl-n{font-weight:700; font-size:14px} .hl-s{font-size:12.5px; color:var(--mut); white-space:nowrap}
@media (max-width:820px){ .help-panel{position:fixed; left:16px; right:16px; top:100px; width:auto; max-width:none} }
.tour{position:fixed; inset:0; z-index:95}
.tour-catch{position:absolute; inset:0}
.tour-spot{position:fixed; border-radius:12px; box-shadow:0 0 0 2px rgba(255,255,255,.9),0 0 0 9999px rgba(17,22,32,.58); pointer-events:none; transition:top .38s cubic-bezier(.4,0,.2,1),left .38s cubic-bezier(.4,0,.2,1),width .38s cubic-bezier(.4,0,.2,1),height .38s cubic-bezier(.4,0,.2,1)}
.tour-spot.nt{transition:none}
.tour-spot{opacity:1}
.tour-card{position:fixed; width:min(340px,calc(100vw - 24px)); background:#141a24; color:#f3f5f8; border-radius:12px; padding:16px 18px 14px; box-shadow:0 18px 50px rgba(0,0,0,.35); transition:top .38s cubic-bezier(.4,0,.2,1),left .38s cubic-bezier(.4,0,.2,1)}
.tour-card.in{animation:tourIn .32s ease both}
@keyframes tourIn{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
.tc-top{display:flex; justify-content:space-between; align-items:center}
.tc-step{font-size:12px; font-weight:700; color:#9aa5b8; letter-spacing:.02em}
.tc-x{border:0; background:none; color:#9aa5b8; font-size:22px; line-height:1; padding:0 2px} .tc-x:hover{color:#fff}
.tour-card h3{margin:6px 0; font-size:17px; color:#fff}
.tour-card p{margin:0 0 14px; font-size:14px; line-height:1.55; color:#d5dbe5}
.tc-foot{display:flex; justify-content:space-between; align-items:center; gap:10px}
.tc-dots{display:flex; gap:5px} .tc-dots span{width:6px; height:6px; border-radius:6px; background:#3b4558; transition:width .25s,background .25s} .tc-dots span.on{width:18px; background:#fff}
.tc-btns{display:flex; gap:6px}
.tc-b{border:0; border-radius:8px; padding:8px 14px; font-size:13.5px; font-weight:700; background:#fff; color:#141a24}
.tc-b.ghost{background:none; color:#c8d0dc} .tc-b.ghost:hover{color:#fff}
@media (prefers-reduced-motion:reduce){ .tour-spot,.tour-card{transition:none} .tour-card.in{animation:none} }

.foot{position:relative; z-index:2}

/* hiasan halaman kartu: selalu terlihat (fixed) */
.kdeco{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.top{z-index:30}
.kdeco>*{position:absolute; display:block; text-decoration:none}
.kdeco .sf,.kdeco .m2,.kdeco .r1,.kdeco .r2,.kdeco .gr{display:none}
/* --- Luar Angkasa --- */
.thm-space .kdeco .sf{display:block; inset:0; background-image:radial-gradient(1.6px 1.6px at 20px 30px,#fff,transparent),radial-gradient(1.2px 1.2px at 120px 90px,#fff,transparent),radial-gradient(2px 2px at 190px 160px,#cfe9ff,transparent),radial-gradient(1.2px 1.2px at 60px 200px,#fff,transparent),radial-gradient(1.6px 1.6px at 240px 60px,#fff,transparent); background-size:260px 230px; animation:twinkle 3.2s ease-in-out infinite alternate}
.thm-space .kdeco .sf.s2{background-size:340px 300px; background-position:110px 70px; animation-duration:2.1s; animation-delay:-1s}
@keyframes twinkle{from{opacity:.25} to{opacity:1}}
.thm-space .kdeco i{height:3px!important; width:180px!important; background:linear-gradient(90deg,transparent,rgba(255,255,255,.95))!important; filter:drop-shadow(0 0 6px #9fd8ff); animation:shoot 6s linear infinite!important}
.thm-space .kdeco i:nth-child(4){display:block!important; animation-delay:-3.6s!important; top:300px}
.thm-space .kdeco b{width:150px; height:150px; top:90px; right:-40px}
.thm-space .kdeco b::after{left:-46px; right:-46px; top:64px; height:22px}
.thm-space .kdeco .m2{display:block; width:64px; height:64px; left:3%; top:58%; border-radius:50%; background:radial-gradient(circle at 35% 30%,#ffd9a8,#ff8f5a 55%,#8a3a2a); box-shadow:0 0 30px rgba(255,143,90,.45); animation:float 6s ease-in-out infinite alternate}
.thm-space .kdeco .r1,.thm-space .kdeco .r2{display:block; width:46px; height:38px; border-radius:46% 54% 50% 42% / 52% 40% 60% 48%; background:radial-gradient(circle at 30% 30%,#b9a493,#6e5a4c 70%); box-shadow:inset -6px -5px 0 rgba(0,0,0,.25), inset 8px 6px 0 -4px rgba(0,0,0,.18); top:30%; left:-60px; animation:drift 38s linear infinite}
.thm-space .kdeco .r2{width:26px; height:22px; top:76%; animation-duration:29s; animation-delay:-14s}
@keyframes drift{from{translate:0 0; rotate:0deg} to{translate:calc(100vw + 120px) -140px; rotate:720deg}}
/* --- Halloween --- */
.thm-halloween .kdeco .sf{display:block; inset:0; background-image:radial-gradient(1.4px 1.4px at 30px 40px,#e9dcff,transparent),radial-gradient(1.2px 1.2px at 160px 120px,#fff,transparent),radial-gradient(1.2px 1.2px at 260px 30px,#e9dcff,transparent); background-size:320px 260px; opacity:.6; animation:twinkle 2.6s ease-in-out infinite alternate}
.thm-halloween .kdeco .sf.s2{display:none}
.thm-halloween .kdeco i{width:64px; height:32px; filter:drop-shadow(0 0 5px rgba(200,160,255,.55))}
.thm-halloween .kdeco i:nth-child(2){width:48px; height:24px}
.thm-halloween .kdeco .m2{display:block; width:120px; height:120px; left:3%; top:84px; border-radius:50%; background:radial-gradient(circle at 40% 40%,#fff6d8,#ffe9a8 60%,#e8c870); box-shadow:0 0 60px 20px rgba(255,233,168,.25); animation:moon 5s ease-in-out infinite alternate}
.thm-halloween .kdeco .m2::after{content:''; position:absolute; width:22px; height:22px; border-radius:50%; left:58%; top:30%; background:rgba(200,170,90,.35); box-shadow:-34px 30px 0 -4px rgba(200,170,90,.3), 6px 44px 0 -7px rgba(200,170,90,.3)}
@keyframes moon{to{box-shadow:0 0 80px 30px rgba(255,233,168,.35)}}
.thm-halloween .kdeco .r1{display:block; width:70px; height:84px; left:4%; bottom:90px; opacity:.85; background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 84'%3E%3Cpath d='M35 2C16 2 6 18 6 38v40l8-7 7 8 7-8 7 8 7-8 7 8 7-8 8 7V38C64 18 54 2 35 2z' fill='%23f6ecff' fill-opacity='.9'/%3E%3Cellipse cx='25' cy='34' rx='5' ry='7' fill='%232a1238'/%3E%3Cellipse cx='45' cy='34' rx='5' ry='7' fill='%232a1238'/%3E%3Cellipse cx='35' cy='52' rx='6' ry='5' fill='%232a1238'/%3E%3C/svg%3E"); animation:ghost 4s ease-in-out infinite alternate}
@keyframes ghost{from{translate:0 0; rotate:-4deg} to{translate:26px -30px; rotate:5deg}}
.thm-halloween .kdeco .r2{display:block; width:64px; height:54px; right:3%; bottom:24px; background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 54'%3E%3Cellipse cx='32' cy='32' rx='28' ry='21' fill='%23ff7a1a'/%3E%3Cellipse cx='32' cy='32' rx='11' ry='21' fill='%23ff9a45'/%3E%3Cpath d='M18 28l6-6 6 6zM34 28l6-6 6 6z' fill='%23ffe066'/%3E%3Cpath d='M18 38q14 9 28 0l-4 5-4-3-4 4-4-4-4 4-4-3z' fill='%23ffe066'/%3E%3C/svg%3E"); filter:drop-shadow(0 0 12px rgba(255,170,60,.7)); animation:flick 1.6s ease-in-out infinite alternate}
@keyframes flick{from{filter:drop-shadow(0 0 6px rgba(255,170,60,.4))} to{filter:drop-shadow(0 0 22px rgba(255,170,60,.9))}}
.thm-halloween .kdeco .gr{display:block; left:0; right:0; bottom:0; height:70px; opacity:.55; background:repeat-x bottom/360px 70px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 70'%3E%3Cpath d='M0 70V58q60-10 120 0t120 0 120 0v12z' fill='%23120718'/%3E%3Cpath d='M40 58V36q0-12 12-12t12 12v22zM180 58V42h-6v-6h6v-6h6v6h6v6h-6v16zM290 58V40q0-9 9-9t9 9v18z' fill='%23120718'/%3E%3C/svg%3E")}
/* --- Wild West --- */
.thm-west .kdeco i{width:56px; height:28px; opacity:.85}
.thm-west .kdeco b{width:170px; height:170px; top:70px; right:-30px}
.thm-west .kdeco .gr{display:block; left:0; right:0; bottom:0; height:110px; opacity:.4; background:repeat-x bottom/720px 110px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 110'%3E%3Cpath d='M0 110V70h60l20-36h90l18 36h120l30-50h110l26 50h246v40z' fill='%238a5530'/%3E%3Cpath d='M0 110V92q180-14 360 0t360 0v18z' fill='%236b3e1d'/%3E%3C/svg%3E")}
.thm-west .kdeco .r2{display:block; width:46px; height:80px; left:6%; bottom:40px; transform-origin:50% 100%; background:no-repeat bottom/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 80'%3E%3Cpath d='M18 80V14q0-8 5-8t5 8v66zM18 44H10q-4 0-4-4V26q0-4 3-4t3 4v12h6zM28 36h6V22q0-4 3-4t3 4v14q0 4-4 4h-8z' fill='%234f6b2a'/%3E%3C/svg%3E"); animation:sway 4s ease-in-out infinite alternate}
@keyframes sway{from{rotate:-2deg} to{rotate:2deg}}
.thm-west .kdeco .r1{display:block; width:62px; height:62px; left:-80px; bottom:38px; background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%237a4a20' stroke-width='2'%3E%3Cellipse cx='30' cy='30' rx='27' ry='20'/%3E%3Cellipse cx='30' cy='30' rx='20' ry='27'/%3E%3Cellipse cx='30' cy='30' rx='26' ry='14' transform='rotate(40 30 30)'/%3E%3Cellipse cx='30' cy='30' rx='26' ry='14' transform='rotate(-40 30 30)'/%3E%3Ccircle cx='30' cy='30' r='12'/%3E%3C/g%3E%3C/svg%3E"); animation:roll 14s linear infinite}
@keyframes roll{0%{translate:0 0; rotate:0deg} 20%{translate:22vw -26px} 30%{translate:33vw 0} 50%{translate:55vw -18px} 60%{translate:66vw 0} 80%{translate:88vw -22px} 100%{translate:calc(100vw + 160px) 0; rotate:1440deg}}
/* --- Polos: tanpa hiasan --- */
.thm-plain .kdeco{display:none}
@media (max-width:820px){ .thm-space .kdeco b{width:96px; height:96px; top:auto; bottom:60px} .thm-halloween .kdeco .m2{width:70px; height:70px; left:auto; right:12px; top:auto; bottom:110px} .thm-west .kdeco b{width:110px; height:110px} }
@media (prefers-reduced-motion:reduce){ .kdeco *{animation:none!important} }
.thm-west .kdeco b{top:auto; bottom:150px; right:-50px}
.thm-space .kdeco b{top:auto; bottom:110px; right:-50px}
.thm-halloween .kdeco .m2{top:auto; bottom:120px; left:-20px}
.thm-halloween .kdeco .r1{left:auto; right:7%; bottom:120px}
.thm-space .kdeco .m2{left:-26px}

/* ===== revisi 6 ===== */
/* burung: sayap dilipat saat hinggap */
.qcard .bird:not(.fly) .wg{transform:rotate(-50deg) scaleY(.65)!important; transform-origin:30px 22px; transition:transform .25s}
.qcard .bird:not(.fly) .wg2{opacity:0; transition:opacity .2s}
/* label jenis soal di punggung kartu */
.pc .bk{overflow:visible}
.tpill{position:absolute; left:50%; top:9%; transform:translateX(-50%); font:800 11px/1 var(--ff); letter-spacing:.04em; text-transform:uppercase; padding:4px 8px; border-radius:999px; background:rgba(255,255,255,.92); color:#1b1426; box-shadow:0 2px 6px rgba(0,0,0,.3); white-space:nowrap; pointer-events:none}
.tpill.t-kasus{background:#b03a2e; color:#fff}
.tpill.t-gambar{background:#2c56c9; color:#fff}
.tpill.t-hitung{background:#e8a317; color:#2a1c00}
.pc.sm .tpill{font-size:9.5px; padding:3px 6px; top:7%}
@media (max-width:820px){ .pc.sm .tpill{font-size:8px; padding:2px 5px} }
/* tombol putar di ramalan */
.btn.spin{position:absolute; left:50%; bottom:2px; transform:translateX(-50%); z-index:6; min-height:46px; padding:10px 22px; border-radius:999px; box-shadow:0 10px 24px rgba(0,0,0,.35)}
.stage .btn.spin{background:var(--tacc); border-color:var(--tacc)}
.btn.spin svg{width:18px; height:18px}
/* kartu soal bergambar: lebih besar */
.qwrap.bigq{max-width:660px}
.qcard.big h2{font-size:26px}
.qcard.big.long h2{font-size:23px}
.qcard.big .chart text{font-size:17px}
.qcard.big .legend{font-size:15px}
.qcard.big .vt{font-size:15px}
.qcard.big .tbl{font-size:16px}
.qcard.big .code{font-size:15px}
@media (max-width:820px){ .qwrap.bigq{max-width:none; padding-left:6px; padding-right:6px} .qcard.big h2{font-size:19px} .qcard.big.long h2{font-size:17px} .qcard.big .chart text{font-size:19px} .qcard.big .qc-in{padding-left:18px; padding-right:18px} .qcard.big .tbl{font-size:14px} }
/* tingkat 5 */
.lv.l5{color:#7a3db8} .lv.l5 .n{background:#7a3db8}
.lv.l5 .pp i{background:currentColor}
.dch i.d5{background:#b48cff}
/* manajerial */
.role.mgr{border-color:color-mix(in srgb,var(--tacc2) 60%,transparent); background:linear-gradient(160deg,var(--tpanel),color-mix(in srgb,var(--tacc2) 14%,var(--tpanel)))}
.role.mgr.lockd{opacity:.9}
.role.mgr .tg{display:flex; align-items:center; gap:4px}
.role.mgr .tg svg{width:12px; height:12px}
.role .rq{font-size:12px; opacity:.75; margin-top:auto; line-height:1.4}
.lock.mreq{align-items:flex-start}
.lock.mreq ul{list-style:none; margin:6px 0 0; padding:0; display:grid; gap:3px}
.lock.mreq li.ok{color:#5cc28d; font-weight:700}
.thm-west .lock.mreq li.ok,.thm-plain .lock.mreq li.ok{color:#17794a}
.lock.mreq em{font-style:normal; opacity:.7}
.proto{font-size:10.5px; font-weight:700; color:var(--warn); background:var(--golds); border-radius:4px; padding:1px 6px; margin-left:4px}
/* testimoni: carousel */
.slider{overflow:hidden; scroll-snap-type:none; touch-action:pan-y; cursor:grab; user-select:none}
.slider:active{cursor:grabbing}
.strk{display:flex; gap:20px; will-change:transform}
.strk .tsc{flex:0 0 calc((100% - 40px)/3)}
@media (max-width:1000px){ .strk .tsc{flex-basis:calc((100% - 20px)/2)} }
@media (max-width:820px){ .strk .tsc{flex-basis:84%} }
.orbw ~ .cd{top:auto; bottom:4px; left:calc(50% + 130px)}
.slider{display:block}
.scr .tpill{z-index:3; top:10px; font-size:11.5px}
/* Game Lab */
.labg{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px; margin-top:22px}
.labc{display:flex; flex-direction:column; gap:8px; padding:18px; border-radius:16px; background:var(--tpanel); border:1px solid var(--tline); color:var(--tpink); transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.labc:hover{transform:translateY(-4px)}
.labc.used{opacity:.7}
.labc .ln{display:flex; justify-content:space-between; align-items:center}
.labc .no{width:30px; height:30px; border-radius:50%; background:var(--tacc); color:#16081f; font-weight:800; display:flex; align-items:center; justify-content:center}
.thm-west .labc .no,.thm-plain .labc .no{color:#fff}
.labc .lt{font-size:11.5px; font-weight:700; padding:2px 8px; border-radius:999px; border:1px solid var(--tline)}
.labc h3{font-family:var(--tfont),var(--ff); font-weight:400; font-size:22px}
.thm-space .labc h3,.thm-plain .labc h3{font-weight:700; font-size:18px}
.labc p{margin:0; font-size:13.5px; opacity:.85; flex:1}
.labc .lb{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:6px}
.labc .tries{display:flex; gap:5px} .labc .tries i{width:10px; height:10px; border-radius:50%; border:2px solid var(--tacc)} .labc .tries i.on{background:var(--tacc)}
.labc .done{display:flex; gap:6px; align-items:center; font-weight:700; font-size:13.5px}
.kw .note .btn.ghost{min-height:30px; padding:4px 10px; margin-left:6px}

/* ===== revisi 7 ===== */
/* ember tegak */
.cup.up{z-index:3}
.cup.up svg{overflow:visible}
.drop{position:absolute; left:50%; top:50%; width:11px; height:11px; margin:-5.5px 0 0 -5.5px; border-radius:50%; z-index:5; pointer-events:none; box-shadow:0 0 6px rgba(255,255,255,.4)}
.drop.pop{background:rgba(255,255,255,.85); width:7px; height:7px}
/* ramalan: kartu diterangi bergantian */
.orbw .pc.sm{transition:filter .12s, box-shadow .12s}
.orbw .pc.lit{z-index:4}
.orbw .pc.lit .bk{box-shadow:0 0 0 3px #ffd166,0 0 26px 6px rgba(255,209,102,.75)!important; filter:brightness(1.25)}
.orbw .pc.lit{scale:1.1}
.orbc.busy{animation:orbglow .5s ease-in-out infinite alternate!important}
.thm-west .orbc.busy svg,.thm-plain .orbc.busy svg{animation:wob .8s ease-in-out infinite}
/* gelembung */
.bub{position:absolute; left:50%; top:0; border-radius:50%; z-index:3; will-change:transform; cursor:default}
.bub .film{position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.75) 0 7%,rgba(255,255,255,.12) 18%,rgba(255,255,255,.05) 55%,rgba(255,255,255,.35) 72%,rgba(255,255,255,.08) 100%); box-shadow:inset 0 0 18px rgba(255,255,255,.35), 0 8px 20px rgba(0,0,0,.25); border:1.5px solid rgba(255,255,255,.55)}
.thm-halloween .bub .film{box-shadow:inset 0 0 22px rgba(94,227,90,.45), 0 8px 20px rgba(0,0,0,.3); border-color:rgba(156,255,143,.6)}
.thm-west .bub .film{box-shadow:inset 0 0 22px rgba(140,196,224,.55), 0 8px 20px rgba(0,0,0,.2)}
.thm-space .bub .film{box-shadow:inset 0 0 22px rgba(94,231,255,.55), 0 0 18px rgba(94,231,255,.35); border-color:rgba(94,231,255,.7)}
.thm-plain .bub .film{background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.95) 0 7%,rgba(134,164,243,.15) 30%,rgba(134,164,243,.25) 75%,rgba(255,255,255,.4) 100%); border-color:rgba(44,86,201,.45)}
.bub .bin{position:absolute; inset:0; display:grid; place-items:center}
.bub .pc.sm{width:64px; height:88px}
.bub.pick{cursor:pointer}
.bub.pick:hover .film{border-color:#ffd166; box-shadow:0 0 0 3px rgba(255,209,102,.6), inset 0 0 22px rgba(255,255,255,.4)}
@media (max-width:820px){ .bub .pc.sm{width:46px; height:63px} .cup.up{width:104px; height:87px; margin:-80px 0 0 -52px} }

/* ===== revisi 8 ===== */
/* ember: kartu terpotong di permukaan air */
.cclip{position:absolute; left:0; top:0; width:100%; height:100%; overflow:hidden; z-index:4; pointer-events:none}
.cclip .pc.xs{margin:-66px 0 0 -48px}
@media (max-width:820px){ .cclip .pc.xs{margin:-52px 0 0 -38px} }
/* kartu kembar */
.mgrid{display:grid; grid-template-columns:repeat(4,112px); gap:16px; justify-content:center; perspective:900px}
.mgrid.n6{grid-template-columns:repeat(3,112px)} .mgrid.n4{grid-template-columns:repeat(2,112px)} .mgrid.n2{grid-template-columns:repeat(2,112px)}
.mcard{width:112px; height:153px; padding:0; border:0; background:none; cursor:pointer}
.mcard .mi{position:relative; display:block; width:100%; height:100%; transform-style:preserve-3d; transition:transform .5s cubic-bezier(.3,1.3,.5,1)}
.mcard.open .mi{transform:rotateY(180deg)}
.mcard .mf{position:absolute; inset:0; border-radius:12px; backface-visibility:hidden; -webkit-backface-visibility:hidden; box-shadow:0 10px 22px rgba(0,0,0,.4); overflow:hidden}
.mcard .mb svg{width:100%; height:100%; display:block}
.mcard .mfr{transform:rotateY(180deg); background:var(--tcard); border:3px solid var(--tframe); display:grid; place-items:center}
.thm-west .mcard .mfr{background:linear-gradient(180deg,#f8ecce,#efdcae); border:4px double #6b3e1d}
.thm-space .mcard .mfr{background:linear-gradient(160deg,#16205a,#0b1030); border-color:#5ee7ff}
.thm-halloween .mcard .mfr{background:linear-gradient(180deg,#fff6ec,#ffe3c4)}
.mcard .mic svg{width:64px; height:64px; display:block}
.mcard:hover:not(.open) .mi{transform:translateY(-4px)}
.mcard.match .mf{box-shadow:0 0 0 4px #ffd166,0 0 28px rgba(255,209,102,.8)}
.mcard.match .mi{animation:pairpop .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes pairpop{0%{scale:1} 50%{scale:1.12} 100%{scale:1}}
.mcard.no .mi{animation:shake .26s}
@keyframes shake{0%,100%{translate:0} 25%{translate:-5px} 75%{translate:5px}}
@media (max-width:820px){ .mgrid,.mgrid.n6{grid-template-columns:repeat(4,72px); gap:10px} .mgrid.n4,.mgrid.n2{grid-template-columns:repeat(2,72px)} .mcard{width:72px; height:98px} .mcard .mic svg{width:42px; height:42px} }
/* ramalan Luar Angkasa: UFO mengelilingi kartu */
.ufo{position:absolute; left:50%; top:50%; width:92px; height:54px; margin:-27px 0 0 -46px; z-index:6; filter:drop-shadow(0 6px 10px rgba(0,0,0,.5)); will-change:transform}
.ufo svg{width:100%; height:100%; display:block; position:relative}
.ufo .ray{position:absolute; left:50%; top:70%; width:90px; height:0; margin-left:-45px; background:linear-gradient(180deg,rgba(94,231,255,.7),rgba(94,231,255,0)); clip-path:polygon(35% 0,65% 0,100% 100%,0 100%); transition:height .4s ease-out; z-index:-1}
.ufo.beam .ray{height:120px}
@media (max-width:820px){ .ufo{width:70px; height:41px; margin:-20px 0 0 -35px} .ufo .ray{width:64px; margin-left:-32px} .ufo.beam .ray{height:90px} }

/* ===== revisi 9 ===== */
/* kipas interaktif */
.fanw{position:absolute; inset:0; touch-action:none; cursor:grab}
.fanw:active{cursor:grabbing}
.fanw .pc{transform-origin:50% 260%; transition:filter .2s}
.fanw .pc .bk{transition:box-shadow .2s}
.fanw .pc.focus .bk{box-shadow:0 0 0 3px #ffd166,0 16px 30px rgba(0,0,0,.5)}
.fanw .pc:not(.focus){filter:brightness(.85)}
.fanw .pc.hl{filter:none}
.arena:has(.fanw){touch-action:none}
/* ember 4 */
@media (max-width:820px){ .cup.up.n4{width:82px; height:68px; margin:-63px 0 0 -41px} .cclip.n4 .pc.xs{width:62px; height:85px; margin:-42px 0 0 -31px} }

/* ===== revisi 10: manajer ===== */
.chips{flex-wrap:wrap; overflow:visible}
.role.mgr .rq{margin-top:8px}
.lock.mreq .note{margin:2px 0 4px; color:inherit; opacity:.8}
.lock.mreq ul{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.cprog{font-weight:800; font-size:20px; padding:6px 14px; border-radius:999px; background:var(--tpanel); border:1px solid var(--tline)}
.mgrdone{display:flex; gap:10px; align-items:center; padding:12px 16px; border-radius:12px; background:color-mix(in srgb,var(--tacc2) 22%,transparent); border:1px solid var(--tacc2); font-weight:700; margin-bottom:12px}
.cases{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:12px}
.case{position:relative; display:flex; flex-direction:column; gap:6px; text-align:left; padding:16px; min-height:132px; border-radius:14px; border:1px solid var(--tline); background:var(--tpanel); color:inherit; transition:transform .3s cubic-bezier(.3,1.6,.5,1), border-color .2s}
button.case:hover{transform:translateY(-4px); border-color:var(--tacc)}
.case .cn{font-size:12px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; opacity:.7}
.case b{font-size:16px; font-family:var(--tfont),var(--ff); font-weight:400}
.thm-space .case b,.thm-plain .case b{font-weight:800; font-size:15px}
.case.open b{font-size:30px; line-height:1}
.case .clv{font-size:12.5px; opacity:.75}
.case .cgo{margin-top:auto; display:flex; align-items:center; gap:4px; font-weight:800; color:var(--tacc)}
.case .cgo svg{width:14px; height:14px}
.case.open{border-color:var(--tacc); box-shadow:0 0 0 1px var(--tacc) inset}
.case.lock{border-style:dashed; opacity:.55; align-items:flex-start}
.case.lock svg{width:22px; height:22px; margin:6px 0}
.case .cr{margin-top:auto; display:inline-flex; align-items:center; gap:5px; align-self:flex-start; font-size:12.5px; font-weight:800; padding:3px 10px; border-radius:999px}
.case .cr svg{width:13px; height:13px}
.case .cr.r3{background:#5cc28d; color:#0b2a18} .case .cr.r2{background:#e0b25a; color:#2a1c00}
@media (max-width:820px){ .cases{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px} .case{min-height:118px; padding:13px} }
/* chat mentor */
.chatw{position:relative; z-index:6; width:100%; max-width:720px; flex:1; min-height:0; display:flex; flex-direction:column; padding:0 16px 16px}
.chat{flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:12px; padding:8px 2px 16px; scroll-behavior:smooth}
.msg{max-width:86%; padding:12px 15px; border-radius:16px; font-size:15px; line-height:1.55; box-shadow:0 6px 18px rgba(0,0,0,.25); animation:cardin .3s ease-out both}
.msg.bot{align-self:flex-start; background:var(--tpanel); color:var(--tpink); border:1px solid var(--tline); border-bottom-left-radius:4px}
.msg.me{align-self:flex-end; background:var(--tacc); color:#16081f; border-bottom-right-radius:4px}
.thm-west .msg.me,.thm-plain .msg.me{color:#fff}
.msg .who{display:block; font-size:11.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; opacity:.65; margin-bottom:3px}
.msg.case{border:2px solid var(--tacc); font-weight:600}
.msg.tw{border-color:var(--tacc2)}
.msg.good{border-left:4px solid #5cc28d}
.msg.warn{border-left:4px solid #e0b25a}
.msg.bad{border-left:4px solid #f08a7e}
.msg ul,.msg ol{margin:8px 0; padding-left:20px}
.msg ul.ok{list-style:none; padding-left:0} .msg ul.ok li{display:flex; gap:6px; align-items:center} .msg ul.ok svg{width:14px; height:14px; color:#5cc28d}
.msg li{margin:3px 0}
.msg.final{max-width:94%}
.dots3{display:inline-flex; gap:4px} .dots3 i{width:7px; height:7px; border-radius:50%; background:currentColor; opacity:.4; animation:dot3 1s infinite} .dots3 i:nth-child(2){animation-delay:.15s} .dots3 i:nth-child(3){animation-delay:.3s}
@keyframes dot3{0%,100%{opacity:.25; transform:none} 50%{opacity:.9; transform:translateY(-3px)}}
.chin{display:flex; gap:10px; align-items:flex-end; padding:12px; border-radius:16px; background:var(--tpanel); border:1px solid var(--tline); box-shadow:0 10px 26px rgba(0,0,0,.3)}
.chin textarea{flex:1; resize:none; border:0; background:transparent; color:var(--tpink); font:inherit; font-size:15px; line-height:1.5; outline:none; max-height:160px}
.chin textarea::placeholder{color:inherit; opacity:.55}
.chin .btn{flex:none}
.chend{display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; padding-top:6px}
.stage:has(.chatw){overflow:hidden}
.stage:has(.chatw) .stg-top{flex:none}
.chin.wait{opacity:.75}
@media (max-width:820px){ .qcard.big .tbl{font-size:12.5px} .qcard.big .tbl th,.qcard.big .tbl td{padding:6px 8px} .qcard.big .vis{margin-top:10px} }
.howto{display:flex; gap:14px; align-items:flex-start; margin-top:26px; padding:16px 18px; border-radius:14px; background:var(--accs); color:var(--ink)}
.howto>svg{width:22px; height:22px; color:var(--acc); flex:none; margin-top:2px}
.howto b{font-size:15.5px} .howto p{margin:4px 0 0; color:var(--ink2); font-size:14.5px}
.role.soon .rel{font-weight:800; opacity:1; color:var(--tacc)}
/* saklar tema siang/malam (dipakai sama di Jejak Lamaran, CV, dan Tips) */
.dn{position:relative;flex:none;width:52px;height:28px;padding:0;border-radius:999px;border:1px solid var(--ln,var(--line,#dde2ea));cursor:pointer;overflow:hidden;display:inline-block;vertical-align:middle;background:#ff9d4a;-webkit-tap-highlight-color:transparent;transition:box-shadow .25s}
.dn:hover{box-shadow:0 0 0 3px rgba(255,157,74,.25)}
.dn.dk:hover{box-shadow:0 0 0 3px rgba(120,170,185,.28)}
.dn:focus-visible{outline:2px solid var(--acc,var(--accent,#2c56c9));outline-offset:2px}
.dn>span{position:absolute;display:block;pointer-events:none}
.dn .dn-sk{inset:0;background:linear-gradient(180deg,#ffbf73 0%,#ff8f3f 100%)}
.dn .dn-st{inset:0;opacity:0;transition:opacity .45s;background:
 radial-gradient(1.2px 1.2px at 9px 8px,#fff,transparent 70%),radial-gradient(1px 1px at 17px 18px,#fff,transparent 70%),
 radial-gradient(1.4px 1.4px at 24px 7px,#fff,transparent 70%),radial-gradient(1px 1px at 12px 22px,#dfe8ee,transparent 70%),
 radial-gradient(1px 1px at 31px 21px,#fff,transparent 70%),linear-gradient(180deg,#0e1f26 0%,#1d3d46 100%)}
.dn .dn-cl{left:25px;bottom:-6px;width:13px;height:13px;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:11px 2px 0 1px rgba(255,255,255,.9),-10px 4px 0 -1px rgba(255,255,255,.75);transition:transform .45s,opacity .35s}
.dn .dn-kn{top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 32%,#fff8c9,#ffd84d 58%,#ffc01f);box-shadow:0 0 0 3px rgba(255,238,160,.38),0 1px 3px rgba(0,0,0,.28);transition:transform .5s cubic-bezier(.45,1.45,.5,1),background .35s,box-shadow .35s}
.dn .dn-kn::before{content:"";position:absolute;inset:0;border-radius:50%;opacity:0;transition:opacity .35s;background:radial-gradient(circle 3px at 62% 30%,rgba(120,132,145,.55),transparent 90%),radial-gradient(circle 2.2px at 36% 58%,rgba(120,132,145,.5),transparent 90%),radial-gradient(circle 1.8px at 66% 68%,rgba(120,132,145,.45),transparent 90%)}
.dn.dk .dn-st{opacity:1}
.dn.dk .dn-cl{transform:translateY(16px);opacity:0}
.dn.dk .dn-kn{transform:translateX(24px);background:radial-gradient(circle at 35% 32%,#f4f6f8,#c4ccd4);box-shadow:0 0 0 3px rgba(255,255,255,.14),0 1px 3px rgba(0,0,0,.4)}
.dn.dk .dn-kn::before{opacity:1}
@media (prefers-reduced-motion:reduce){.dn,.dn>span,.dn .dn-kn::before{transition:none}}
/* Cerita Saya (popup) */
.mbox.cs{max-width:640px}
.cs-lead{margin:0 0 10px;font-size:14.5px;line-height:1.55}
.cs-mut{margin:6px 0 10px;font-size:13px;color:var(--mut);line-height:1.5}
.cs-h{margin:18px 0 8px;font-size:13px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--mut)}
.cs-t{display:flex;align-items:center;gap:8px;min-width:0}
.cs-back{all:unset;cursor:pointer;display:flex;padding:6px;border-radius:8px;color:var(--mut)}
.cs-back:hover{background:var(--ln2)} .cs-back:focus-visible{outline:2px solid var(--acc)}
.cs-back .ic{width:20px;height:20px}
.cs-meth{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cs-m{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:5px;border:1px solid var(--ln);background:var(--sf2);border-radius:12px;padding:13px 14px}
.cs-m:hover{border-color:var(--acc);background:var(--accs)} .cs-m:focus-visible{outline:2px solid var(--acc)}
.cs-m b{font-size:16px}
.cs-m span{font-size:13px;color:var(--ink2);line-height:1.45}
.cs-m small{font-size:12px;color:var(--mut);margin-top:auto;padding-top:4px}
.cs-draft{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--golds);border-radius:10px;padding:10px 12px;margin-bottom:12px;font-size:13.5px}
.cs-draft .btn{padding:6px 12px;font-size:13px;flex:none}
.cs-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.cs-list li{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--ln);border-radius:10px;padding:9px 12px}
.cs-list li>span:first-child{display:flex;flex-direction:column;min-width:0} .cs-list b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px} .cs-list small{color:var(--mut);font-size:12px}
.cs-ac{display:flex;gap:6px;flex:none} .cs-ac .btn{padding:5px 11px;font-size:13px}
.cs-parts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.cs-parts li{display:flex;flex-direction:column;gap:3px;border-left:3px solid var(--acc);background:var(--sf2);border-radius:0 10px 10px 0;padding:10px 13px}
.cs-parts b{font-size:14.5px} .cs-parts span{font-size:13.5px;color:var(--ink2);line-height:1.5} .cs-parts em{font-style:normal;font-size:13px;color:var(--mut);line-height:1.5}
.cs-f{display:flex;flex-direction:column;gap:5px;margin:0 0 12px}
.cs-f>span{font-size:13px;color:var(--ink2);line-height:1.45}
.cs-i{margin:0;font:inherit;font-size:14px;resize:vertical}
textarea.cs-i{min-height:76px}
.cs-foot{display:flex;gap:10px;justify-content:flex-end;margin-top:14px;flex-wrap:wrap}
.cs-res{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.cs-res li{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--ln);border-radius:10px;padding:10px 12px;font-size:13.5px;line-height:1.5}
.cs-res li>span:nth-child(2){flex:1;min-width:0} .cs-res b{display:block;font-size:14px}
.cs-res .cs-ic{display:flex;width:22px;height:22px;border-radius:50%;align-items:center;justify-content:center;flex:none}
.cs-res .cs-ic .ic{width:14px;height:14px}
.cs-res li.gd .cs-ic{background:var(--oks);color:var(--ok)} .cs-res li.bd .cs-ic{background:var(--warns);color:var(--warn)} .cs-res li.bd{border-color:var(--warn)}
.cs-ed{all:unset;cursor:pointer;color:var(--acc);font-weight:700;font-size:12.5px;flex:none;padding:2px 4px} .cs-ed:hover{text-decoration:underline}
.cs-time{display:flex;gap:8px;align-items:center;margin:12px 0 0;font-size:13.5px;background:var(--accs);border-radius:10px;padding:9px 12px}
.cs-time .ic{width:18px;height:18px;flex:none;color:var(--acc)}
.cs-q{margin:0;padding-left:18px;font-size:13.5px;line-height:1.6}
.cs-join{display:flex;flex-direction:column;gap:8px;background:var(--sf2);border-radius:10px;padding:12px 14px;font-size:14px;line-height:1.55}
.cs-join p{margin:0} .cs-join small{display:block;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
@media (max-width:560px){
 #modal .ov:has(.mbox.cs){align-items:flex-end;padding:0}
 .mbox.cs{max-width:none;border-radius:16px 16px 0 0;max-height:94dvh;padding:18px 16px 22px}
 .cs-meth{grid-template-columns:1fr}
}
/* sudut lebih kotak untuk Cerita Saya dan tombol hero */
.mbox.cs{border-radius:6px}
.mbox.cs .btn{border-radius:5px}
.mbox.cs .inp{border-radius:5px}
.cs-m,.cs-draft,.cs-list li,.cs-res li,.cs-time,.cs-join{border-radius:5px}
.cs-parts li{border-radius:0 5px 5px 0}
.cs-back,.cs-m:focus-visible{border-radius:5px}
.hero .cta .btn,.cta .btn.big{border-radius:5px}
@media (max-width:560px){ .mbox.cs{border-radius:8px 8px 0 0} }
/* teks isian ikut tema (gelap: putih) */
.inp,.cs-i,textarea.cs-i{color:var(--ink); caret-color:var(--ink)}
.inp::placeholder,.cs-i::placeholder{color:var(--mut); opacity:.75}

/* detail kecil di Kartu Latihan: dekorasi yang bisa diklik */
.kdeco .spd,.kdeco .pl,.kdeco .pf{display:none}
.thm-halloween .kdeco b::after{display:none}
.thm-halloween .kdeco .spd{display:block; right:58px; top:0; width:24px; height:150px; transform-origin:50% 0; animation:hang 4s ease-in-out infinite}
.kdeco .spd .sps{position:absolute; inset:0; transform-origin:50% 0; background:no-repeat bottom/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 150'%3E%3Cpath d='M12 0v128' stroke='%23e9dcff' stroke-opacity='.5'/%3E%3Cg stroke='%23120718' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M8 134l-7-4M8 138h-8M8 141l-7 4M16 134l7-4M16 138h8M16 141l7 4'/%3E%3C/g%3E%3Cellipse cx='12' cy='139' rx='5' ry='6' fill='%23120718'/%3E%3Ccircle cx='12' cy='131' r='3.5' fill='%23120718'/%3E%3Ccircle cx='10.8' cy='130.6' r='.9' fill='%23ff7a1a'/%3E%3Ccircle cx='13.2' cy='130.6' r='.9' fill='%23ff7a1a'/%3E%3C/svg%3E")}
.kdeco .spd .spb{position:absolute; left:-10px; bottom:0; width:44px; height:48px}
.kdeco .spd .sps.pain{animation:spw .15s linear infinite}
@keyframes spw{0%{rotate:-10deg; scale:1 1} 25%{rotate:8deg; scale:1.07 .97} 50%{rotate:-7deg; scale:.95 1.04} 75%{rotate:11deg; scale:1.06 1} 100%{rotate:-10deg; scale:1 1}}
.thm-halloween .kdeco .pl{display:block; position:absolute; inset:0; background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 54'%3E%3Cpath d='M31 12q1-8 7-10' stroke='%233f7a2a' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3Cellipse cx='32' cy='12.5' rx='11' ry='4.5' fill='%23e8680c'/%3E%3C/svg%3E")}
.thm-halloween .kdeco .pf{display:block; position:absolute; left:50%; top:12px; width:30px; height:0; margin-left:-15px; opacity:0; pointer-events:none}
.kdeco .pf::before{content:''; position:absolute; left:50%; top:0; width:170px; height:150px; translate:-50% -58%; border-radius:50%; background:radial-gradient(circle,rgba(255,180,70,.75),rgba(255,110,20,.3) 45%,transparent 70%)}
.kdeco .pf::after{content:''; position:absolute; left:3px; bottom:-4px; width:24px; height:8px; border-radius:50%; background:#3a1400}
.kdeco .pf span{position:absolute; bottom:0; border-radius:50% 50% 45% 45% / 72% 72% 28% 28%; background:radial-gradient(ellipse at 50% 85%,#fff6b8 0,#ffc83a 36%,#ff6a1a 72%,rgba(255,60,0,0) 74%); transform-origin:50% 100%; animation:fl .22s ease-in-out infinite alternate; z-index:1}
.kdeco .pf span:nth-child(1){left:2px; width:12px; height:30px}
.kdeco .pf span:nth-child(2){left:8px; width:15px; height:44px; animation-duration:.17s}
.kdeco .pf span:nth-child(3){left:18px; width:11px; height:28px; animation-delay:-.1s}
@keyframes fl{from{scale:1 .8; rotate:-7deg} to{scale:1.12 1.25; rotate:7deg}}
#fxtop{position:fixed; inset:0; z-index:40; pointer-events:none; overflow:hidden}
.fxc{position:fixed; pointer-events:none; background-repeat:no-repeat; background-position:center; background-size:contain}
body.fx-hot{cursor:pointer}
body.fx-drag,body.fx-drag *{cursor:grabbing!important; user-select:none}
.kstar{position:absolute; width:7px; height:7px; margin:-3px 0 0 -3px; border-radius:50%; background:#fff; box-shadow:0 0 9px 3px rgba(200,230,255,.95),0 0 26px 9px rgba(120,180,255,.55); animation:kblink .75s ease-in-out 5; pointer-events:none}
.kstar::before,.kstar::after{content:''; position:absolute; left:50%; top:50%; width:28px; height:1.6px; translate:-50% -50%; background:linear-gradient(90deg,transparent,#fff,transparent)}
.kstar::after{rotate:90deg}
.kstar.off{opacity:0; transition:opacity .5s}
@keyframes kblink{0%,100%{opacity:.35; scale:.7} 50%{opacity:1; scale:1.7}}
.kfall{position:absolute; width:150px; height:2.5px; border-radius:2px; transform-origin:0 50%; background:linear-gradient(90deg,#fff,rgba(190,225,255,.6) 30%,transparent); filter:drop-shadow(0 0 6px #bfe0ff)}

/* laba-laba: tali ekstra supaya tetap tersambung saat ditarik jauh; salinan di atas konten saat ditarik */
.kdeco .spd::before,#fxtop .spd::before{content:''; position:absolute; left:50%; bottom:100%; width:1px; height:500px; margin-left:-.5px; background:rgba(233,220,255,.5)}
#fxtop .spd{position:absolute; right:58px; top:0; width:24px; height:150px; transform-origin:50% 0}
#fxtop .spd .sps{position:absolute; inset:0; transform-origin:50% 0; background:no-repeat bottom/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 150'%3E%3Cpath d='M12 0v128' stroke='%23e9dcff' stroke-opacity='.5'/%3E%3Cg stroke='%23120718' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M8 134l-7-4M8 138h-8M8 141l-7 4M16 134l7-4M16 138h8M16 141l7 4'/%3E%3C/g%3E%3Cellipse cx='12' cy='139' rx='5' ry='6' fill='%23120718'/%3E%3Ccircle cx='12' cy='131' r='3.5' fill='%23120718'/%3E%3Ccircle cx='10.8' cy='130.6' r='.9' fill='%23ff7a1a'/%3E%3Ccircle cx='13.2' cy='130.6' r='.9' fill='%23ff7a1a'/%3E%3C/svg%3E")}
#fxtop .spd .spb{display:none}
#fxtop .spd .sps.pain{animation:spw .15s linear infinite}
/* header Jejak Lamaran ikut tema kartu (hanya di halaman Kartu Latihan) */
.top{transition:background .35s,border-color .35s,color .35s}
.top.kt-halloween{--ink:#fff6ec; --mut:#c9b6e6; --ln:rgba(200,160,255,.32); --ln2:rgba(200,160,255,.16); --acc:#ff7a1a; --accs:rgba(255,122,26,.2); --acc-ink:#16081f; --golds:rgba(255,209,102,.16); --warn:#ffd166; --sf:#2a1245; --sf2:#341a54; background:linear-gradient(90deg,#1c0b2b,#3a1858); border-bottom-color:rgba(255,122,26,.45)}
.top.kt-west{--ink:#3a2310; --mut:#7a5a3a; --ln:rgba(107,62,29,.38); --ln2:rgba(107,62,29,.2); --acc:#b5532a; --accs:rgba(181,83,42,.18); --acc-ink:#fff8ea; --golds:rgba(242,193,78,.4); --warn:#6b3e1d; --sf:#f6e7c4; --sf2:#efdcae; background:linear-gradient(90deg,#ecd5a4,#d9aa72); border-bottom-color:#6b3e1d}
.top.kt-space{--ink:#e8f4ff; --mut:#9fb2d8; --ln:rgba(94,231,255,.34); --ln2:rgba(94,231,255,.16); --acc:#5ee7ff; --accs:rgba(94,231,255,.16); --acc-ink:#04101a; --golds:rgba(255,209,102,.16); --warn:#ffd166; --sf:#0f1638; --sf2:#16205a; background:linear-gradient(90deg,#050818,#1d1450); border-bottom-color:rgba(94,231,255,.5)}

.fxsp{position:fixed; inset:0; pointer-events:none}
.fxsp .fxsl{position:absolute; inset:0; overflow:visible}
.fxsp .fxsb{position:absolute; left:0; top:0; width:26px; height:26px; transform-origin:50% 50%}
.fxsp .fxsb svg{display:block}
.fxsp .fxsb.pain svg{animation:spw .15s linear infinite}

/* Cerita Saya: tombol lebarkan layar (laptop) */
.csw{display:flex;flex-direction:column;align-items:stretch;width:min(640px,100%);max-height:calc(100dvh - 32px);transition:width .55s cubic-bezier(.34,1.56,.64,1)}
.csw.wide{width:min(880px,100%)}
.csw .mbox.cs{min-height:0;transition:min-height .55s cubic-bezier(.34,1.56,.64,1)}
.csw.wide .mbox.cs{min-height:min(76dvh,760px)}
.csw .mbox.cs{max-width:none;width:100%;flex:1 1 auto;min-height:0;max-height:none}
.csbar{display:flex;justify-content:flex-end;margin-bottom:10px}
.csw-btn{display:inline-flex;align-items:center;gap:9px;font:inherit;font-size:14px;font-weight:750;padding:11px 18px 11px 15px;border-radius:5px;border:0;cursor:pointer;background:rgba(255,255,255,.94);color:#1a2233;box-shadow:0 2px 8px rgba(0,0,0,.2);transition:transform .2s cubic-bezier(.34,1.56,.64,1),background .2s}
.csw-btn:hover{transform:translateY(-1px) scale(1.04)}
.csw-btn:active{transform:scale(.95)}
.csw-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.csw-ar{width:18px;height:18px;transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.csw-btn.on .csw-ar{transform:rotate(180deg)}
.csw-btn:hover .csw-ar{transform:scale(1.2)}
.csw-btn.on:hover .csw-ar{transform:rotate(180deg) scale(1.2)}
.csw-btn.pop{animation:cswpop .5s ease}
:root[data-theme="dark"] .csw-btn{background:#232b3a;color:#eef1f6}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .csw-btn{background:#232b3a;color:#eef1f6}}
@keyframes cswpop{0%{transform:scale(1)}30%{transform:scale(.9,1.1)}60%{transform:scale(1.1,.94)}100%{transform:scale(1)}}
.csw.boing-o .mbox{animation:cswo .6s ease}
.csw.boing-i .mbox{animation:cswi .6s ease}
@keyframes cswo{0%{transform:scale(1)}35%{transform:scale(1.012,.985)}65%{transform:scale(.996,1.006)}100%{transform:scale(1)}}
@keyframes cswi{0%{transform:scale(1)}35%{transform:scale(.99,1.012)}65%{transform:scale(1.004,.996)}100%{transform:scale(1)}}
@media (max-width:860px){ .csbar{display:none} }
@media (max-width:700px){
 #modal .ov:has(.csw){padding:0;align-items:stretch}
 .csw,.csw.wide{width:100%;max-height:none;height:100dvh}
 .csw .mbox.cs{border-radius:0;height:100%;max-height:none;padding:16px 16px 22px}
}
@media (prefers-reduced-motion:reduce){.csw,.csw-btn,.csw-ar{transition:none}.csw .mbox,.csw-btn.pop{animation:none!important}}

.ttl-note{margin:4px 0 0;font-size:13px;font-weight:650;color:var(--acc,#2c56c9)}
.thm-halloween .ttl-note,.thm-space .ttl-note{color:#ffb36b}
.thm-west .ttl-note{color:#8a3d1c}

/* Cerita Saya, mode lebar: isi ikut membesar supaya tidak sepi */
.cs-lead,.cs-mut,.cs-h,.cs-m,.cs-m b,.cs-m span,.cs-m small,.cs-draft,.cs-list li,.cs-list b,.cs-list small,.cs-parts li,.cs-parts b,.cs-parts span,.cs-parts em,.cs-f>span,.cs-i,.cs-res li,.cs-res b,.cs-time,.cs-join,.cs-q,.mbox.cs .mh h2{transition:font-size .5s ease,padding .5s ease}
@media (min-width:861px){
 .csw.wide .mbox.cs{display:flex;flex-direction:column;padding:28px 34px 32px}
 .csw.wide .mbox.cs .mh h2{font-size:25px}
 .csw.wide .cs-lead{font-size:16.5px;margin-bottom:14px}
 .csw.wide .cs-mut{font-size:14.5px}
 .csw.wide .cs-h{font-size:14px;margin-top:22px}
 .csw.wide .cs-meth{gap:16px;flex:1 1 auto;grid-auto-rows:1fr;margin-bottom:4px}
 .csw.wide .cs-m{padding:22px 24px;gap:8px}
 .csw.wide .cs-m b{font-size:20px}
 .csw.wide .cs-m span{font-size:15.5px;line-height:1.5}
 .csw.wide .cs-m small{font-size:13.5px}
 .csw.wide .cs-draft{padding:14px 18px;font-size:15px;margin-bottom:16px}
 .csw.wide .cs-list li{padding:14px 18px}
 .csw.wide .cs-list b{font-size:16px} .csw.wide .cs-list small{font-size:13.5px}
 .csw.wide .cs-parts{gap:14px;flex:1 1 auto}
 .csw.wide .cs-parts li{padding:16px 20px;flex:1 1 auto;justify-content:center}
 .csw.wide .cs-parts b{font-size:17px} .csw.wide .cs-parts span{font-size:15.5px} .csw.wide .cs-parts em{font-size:15px}
 .csw.wide .cs-f>span{font-size:14.5px}
 .csw.wide .cs-i{font-size:16px}
 .csw.wide .cs-res{flex:1 1 auto;gap:10px}
 .csw.wide .cs-res li{padding:14px 18px;font-size:15.5px}
 .csw.wide .cs-res b{font-size:16px}
 .csw.wide .cs-time{font-size:15px;padding:12px 16px}
 .csw.wide .cs-join{font-size:15.5px;padding:16px 18px}
 .csw.wide .cs-q{font-size:15.5px}
}