/* Wiki HANSIP. Same look as the main page hansip.cirya.id: night palette, wood frames, hard pixel shadows,
   Jersey 15 for titles, VT323 for reading, Silkscreen for small labels. Motion lives in wiki-fx.js. */
@font-face{font-family:"Jersey 15";src:url(../aset/font/Jersey15-Regular.woff2) format("woff2");font-display:swap}
@font-face{font-family:"VT323";src:url(../aset/font/VT323-Regular.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Silkscreen";src:url(../aset/font/Silkscreen-Regular.woff2) format("woff2");font-display:swap}
:root{
  color-scheme:dark;
  --night:#14182B;--night2:#1E2440;--night3:#0E1120;--night4:#272E52;
  --gold:#F2C94C;--cream:#F7ECC9;--cream2:#D8CCB0;--dim:#B3A98F;
  --paper:#EFE3C2;--ink:#2B3A67;--red:#B5332E;--green:#3F8A63;--wood:#7A5434;--brown:#7A6D57;
  --line:rgba(216,204,176,.16);
  --t1:#D0D5D6;--t2:#78BAFF;--t3:#C49AF5;--t4:#FF938F;
  --glow:0 0 0 2px var(--gold),0 0 18px rgba(242,201,76,.45);
  --title:"Jersey 15",system-ui,sans-serif;--body:"VT323",ui-monospace,monospace;--caps:"Silkscreen",ui-monospace,monospace;
  /* old names kept so nothing that still reads them breaks */
  --display:var(--title);--mono:var(--body);--lamp:var(--gold);
  --top:64px;--px:3px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-padding-top:calc(var(--top) + 14px);-webkit-text-size-adjust:100%;background:var(--night)}
body{margin:0;background:var(--night);color:var(--cream);font:22px/1.32 var(--body);overflow-x:hidden}
a{color:var(--gold);text-underline-offset:3px;text-decoration-thickness:2px}
a:hover{color:var(--cream)}
img{max-width:100%}
.px{image-rendering:pixelated}
::selection{background:var(--gold);color:var(--night)}
h1,h2,h3{font-family:var(--title);font-weight:400;line-height:1;letter-spacing:.01em;text-wrap:balance;margin:0}
h1{font-size:clamp(42px,5.4vw,60px);color:var(--cream);text-shadow:0 3px 0 rgba(0,0,0,.55)}
h2{font-size:clamp(30px,3.6vw,38px);color:var(--cream);margin:44px 0 14px;padding-bottom:8px;border-bottom:3px solid var(--wood);display:flex;align-items:center;gap:12px}
h2::before{content:"";width:10px;height:10px;flex:none;background:var(--gold);box-shadow:3px 3px 0 #000}
h3{font-size:27px;color:var(--gold);margin:28px 0 10px}
p{margin:0 0 .9em;max-width:74ch}
ul,ol{max-width:74ch;padding-left:1.2em;margin:0 0 1em}
li{margin:.3em 0}
li::marker{color:var(--gold)}
b,strong{font-weight:400;color:var(--cream);text-shadow:.5px 0 0 currentColor}
.mono{font-family:var(--body);font-size:1em;line-height:1.15}
.dim{color:var(--dim)}
.small{font-size:18px}
.skip{position:absolute;left:-999px;top:8px;background:var(--gold);color:var(--night);padding:8px 12px;z-index:40;font:13px/1 var(--caps);letter-spacing:.1em;text-transform:uppercase}
.skip:focus{left:8px}
:focus-visible{outline:none;box-shadow:var(--glow)}
a:focus-visible{outline:none;box-shadow:var(--glow);text-decoration:none}

/* ---------- bar atas ---------- */
.top{position:sticky;top:0;z-index:30;background:rgba(20,24,43,.93);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-bottom:3px solid var(--wood)}
.top-in{display:flex;align-items:center;gap:16px;height:var(--top);padding-inline:16px;max-width:1440px;margin:0 auto}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--cream);flex:none}
.brand img{width:32px;height:32px;image-rendering:pixelated;filter:drop-shadow(2px 2px 0 #000)}
.brand span{font:32px/1 var(--title);letter-spacing:.03em;transition:color .15s steps(2)}
.brand small{font:11px/1 var(--caps);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);border:2px solid var(--gold);padding:5px 7px 4px;margin-left:2px}
.brand:hover span{color:var(--gold)}
.brand:hover img{animation:hop .4s steps(2)}
@keyframes hop{50%{transform:translateY(-4px)}}
.search{position:relative;flex:1;max-width:480px;margin-left:auto}
.search::before{content:"";position:absolute;left:12px;top:50%;width:16px;height:16px;margin-top:-8px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Cpath fill='%23D8CCB0' d='M2 0h3v1H2zM1 1h1v1H1zM5 1h1v1H5zM0 2h1v3H0zM6 2h1v3H6zM1 5h1v1H1zM5 5h1v1H5zM2 6h3v1H2zM6 6h1v1H6zM7 7h1v1H7z'/%3E%3C/svg%3E") center/16px no-repeat;image-rendering:pixelated}
.search input{width:100%;background:var(--night3);border:2px solid var(--wood);color:var(--cream);font:21px/1 var(--body);padding:8px 44px 7px 38px;border-radius:0;box-shadow:inset 0 3px 0 rgba(0,0,0,.35);transition:border-color .15s steps(2)}
.search input::placeholder{color:#8F876F}
.search input:focus{outline:none;border-color:var(--gold);box-shadow:inset 0 3px 0 rgba(0,0,0,.35),0 0 18px rgba(242,201,76,.3)}
.search input::-webkit-search-cancel-button{-webkit-appearance:none}
.search .kbd{position:absolute;right:8px;top:50%;transform:translateY(-50%);font:11px/1 var(--caps);color:var(--dim);border:2px solid rgba(216,204,176,.3);padding:3px 6px 2px;pointer-events:none}
.search:focus-within .kbd{opacity:0}
.qres{position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--night2);border:3px solid var(--wood);box-shadow:6px 6px 0 #000;max-height:min(70vh,540px);overflow:auto;transform-origin:50% 0;animation:qdrop .22s steps(4)}
@keyframes qdrop{from{clip-path:inset(0 0 100% 0);transform:translateY(-6px)}to{clip-path:inset(0 0 -20px 0);transform:none}}
.qres a{position:relative;display:flex;align-items:center;gap:10px;padding:7px 12px 6px;text-decoration:none;color:var(--cream);border-bottom:2px solid var(--line);font-size:21px}
.qres a:last-child{border-bottom:0}
.qres a.on,.qres a:hover{background:var(--night4);color:var(--gold);box-shadow:inset 4px 0 0 var(--gold)}
.qres .kind{margin-left:auto;font:10px/1 var(--caps);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.qres a.on .kind{color:var(--cream2)}
.qres .none{padding:12px;color:var(--dim)}
.spoil-btn,.menu-btn,.btn{all:unset;box-sizing:border-box;cursor:pointer;flex:none;font:12px/1 var(--caps);letter-spacing:.12em;text-transform:uppercase;color:var(--cream);border:2px solid var(--wood);background:var(--night3);padding:10px 13px 9px;box-shadow:3px 3px 0 #000;transition:transform .12s steps(2),box-shadow .12s steps(2),background .12s steps(2);white-space:nowrap;text-align:center}
.spoil-btn:hover,.menu-btn:hover,.btn:hover{color:var(--night);background:var(--gold);border-color:var(--gold)}
.spoil-btn:active,.menu-btn:active,.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #000}
.spoil-btn:focus-visible,.menu-btn:focus-visible,.btn:focus-visible{box-shadow:3px 3px 0 #000,var(--glow)}
.spoil-btn[aria-pressed="true"]{color:var(--night);background:var(--gold);border-color:var(--gold)}
.spoil-btn::before{content:"";display:inline-block;width:8px;height:8px;margin-right:8px;vertical-align:0;background:var(--red);box-shadow:inset -2px -2px 0 rgba(0,0,0,.3)}
.spoil-btn[aria-pressed="true"]::before{background:var(--green)}
.menu-btn{display:none}
.prog{position:absolute;left:0;bottom:-3px;height:3px;width:100%;background:var(--gold);transform-origin:0 50%;transform:scaleX(0);box-shadow:0 0 8px rgba(242,201,76,.6);pointer-events:none}

/* ---------- kerangka ---------- */
.shell{display:grid;grid-template-columns:248px minmax(0,1fr);max-width:1440px;margin:0 auto}
.side{position:sticky;top:var(--top);align-self:start;height:calc(100vh - var(--top));overflow:auto;padding:20px 12px 48px 16px;border-right:3px solid rgba(122,84,52,.55);background:linear-gradient(90deg,transparent,rgba(14,17,32,.55));scrollbar-width:thin;scrollbar-color:var(--wood) transparent}
.side h4{font:11px/1 var(--caps);font-weight:400;color:var(--gold);text-transform:uppercase;letter-spacing:.14em;margin:22px 0 8px;padding-left:10px;display:flex;align-items:center;gap:8px}
.side h4::after{content:"";flex:1;height:2px;background:repeating-linear-gradient(90deg,rgba(122,84,52,.8) 0 4px,transparent 4px 8px)}
.side h4:first-child{margin-top:2px}
.side a{position:relative;display:block;padding:4px 10px 3px 22px;color:var(--cream2);text-decoration:none;font-size:21px;line-height:1.15;transition:color .12s steps(2),transform .12s steps(2)}
.side a::before{content:"";position:absolute;left:8px;top:50%;width:6px;height:6px;margin-top:-3px;background:rgba(216,204,176,.25);transition:background .12s steps(2)}
.side a:hover{color:var(--cream);transform:translateX(3px)}
.side a:hover::before{background:var(--cream2)}
.side a.on{color:var(--gold);background:linear-gradient(90deg,rgba(242,201,76,.16),transparent 85%)}
.side a.on::before{left:6px;width:0;height:0;margin-top:-6px;background:none;border-left:9px solid var(--gold);border-top:6px solid transparent;border-bottom:6px solid transparent;filter:drop-shadow(0 0 4px rgba(242,201,76,.7));animation:mark .3s steps(3)}
.side a.on::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold);transform-origin:50% 50%;animation:bar .25s steps(3)}
@keyframes mark{from{transform:translateX(-10px);opacity:0}to{transform:none;opacity:1}}
@keyframes bar{from{transform:scaleY(0)}to{transform:none}}
main{padding:28px clamp(16px,3vw,44px) 72px;min-height:72vh;min-width:0}
main:focus{outline:none}
.crumbs{font:11px/1.6 var(--caps);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-bottom:12px}
.crumbs a{color:var(--cream2);text-decoration:none;border-bottom:2px solid rgba(216,204,176,.25)}
.crumbs a:hover{color:var(--gold);border-color:var(--gold)}
.lede{font-size:24px;line-height:1.3;color:var(--cream2);max-width:66ch;margin-top:12px}
.foot{border-top:3px solid var(--wood);background:var(--night3);padding:34px 16px 42px;color:var(--dim);font-size:19px;text-align:center;display:grid;gap:10px;justify-items:center}
.foot>div{max-width:760px}
.foot b{color:var(--cream)}
.foot a{color:var(--cream2);text-decoration:none;font:22px/1 var(--title);letter-spacing:.02em}
.foot a:hover{color:var(--gold)}
.foot .yang{font:11px/1 var(--caps);letter-spacing:.16em;text-transform:uppercase;color:var(--brown)}
.foot .kentong{width:16px;height:36px;image-rendering:pixelated;margin-bottom:2px}

/* ---------- label ---------- */
.badge{display:inline-block;font:10px/1 var(--caps);letter-spacing:.1em;text-transform:uppercase;padding:5px 7px 4px;border:2px solid;vertical-align:.35em;white-space:nowrap;margin-left:8px;text-shadow:none}
h1 .badge{font-size:11px;vertical-align:.6em}
.badge.unrel{color:var(--night);border-color:var(--gold);background:var(--gold);box-shadow:2px 2px 0 #000}
.badge.unrel::before{content:"";display:inline-block;width:5px;height:5px;background:var(--night);margin-right:6px;vertical-align:1px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.badge.full{color:var(--t3);border-color:rgba(196,154,245,.6)}
.badge.coop{color:var(--t2);border-color:rgba(120,186,255,.6)}
.badge.boss{color:var(--cream);border-color:#7E211E;background:var(--red);box-shadow:2px 2px 0 #000}
.tier{position:relative;overflow:hidden;font:20px/1 var(--title);padding:3px 6px 1px;color:#14182B;display:inline-block;min-width:1.8em;text-align:center;box-shadow:2px 2px 0 #000;vertical-align:.08em;text-shadow:none}
.tier.t0{background:var(--t1)}.tier.t1{background:var(--t2)}.tier.t2{background:var(--t3)}
.tier.t3{background:var(--t4)}
.tier.t3::after{content:"";position:absolute;top:0;bottom:0;left:0;width:60%;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.75) 50%,transparent 70%);transform:translateX(-120%);animation:shine 3.2s steps(10) infinite;pointer-events:none}
@keyframes shine{0%,62%{transform:translateX(-120%)}100%{transform:translateX(260%)}}
.tc0{color:var(--t1)}.tc1{color:var(--t2)}.tc2{color:var(--t3)}.tc3{color:var(--t4)}
.tag{display:inline-block;font:10px/1 var(--caps);letter-spacing:.1em;text-transform:uppercase;padding:5px 7px 4px;border:2px solid var(--gold);color:var(--gold);margin:2px 4px 2px 0;text-decoration:none;white-space:nowrap;vertical-align:.15em;transition:background .12s steps(2),color .12s steps(2)}
a.tag:hover{background:var(--gold);color:var(--night)}
.pos,.good{color:#9ED67E}.neg,.bad{color:#FF8E7E}

/* ---------- spoiler ---------- */
.spoiler{filter:blur(6px);cursor:pointer;user-select:none;transition:filter .2s steps(3);background:repeating-linear-gradient(135deg,var(--night4) 0 6px,var(--night2) 6px 12px);outline:2px dashed transparent;outline-offset:2px}
.spoiler:hover{filter:blur(3px);outline-color:rgba(242,201,76,.5)}
.spoiler:focus-visible{filter:blur(3px);box-shadow:none;outline:2px solid var(--gold)}
.spoiler.open,.spoil-open .spoiler{filter:none;cursor:auto;user-select:auto;background:transparent;outline:0}
.spoiler.open{animation:unveil .3s steps(3)}
@keyframes unveil{from{filter:blur(6px)}to{filter:blur(0)}}
.spoil-note{font:11px/1.4 var(--caps);letter-spacing:.08em;color:var(--dim)}

/* ---------- ikon ---------- */
.ic{width:32px;height:32px;image-rendering:pixelated;object-fit:contain;vertical-align:middle;flex:none;filter:drop-shadow(2px 2px 0 rgba(0,0,0,.55))}
.ic.sm{width:22px;height:22px;filter:none}
.ic.lg{width:64px;height:64px}
.ic.xl{width:128px;height:128px}
.ic.blank{display:inline-block;background:var(--night3);border:2px dashed rgba(216,204,176,.2);filter:none}
.nm{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--cream);font-size:21px}
.nm:hover{color:var(--gold)}
.nm:hover .ic{animation:hop .35s steps(2)}

/* ---------- tabel ---------- */
.tools{display:flex;flex-wrap:wrap;gap:8px 8px;align-items:center;margin:16px 0 12px}
.tools input,.tools select,.cslot select,.calc-tools select{background-color:var(--night3);border:2px solid var(--wood);color:var(--cream);font:20px/1 var(--body);padding:7px 10px 6px;border-radius:0;box-shadow:inset 0 3px 0 rgba(0,0,0,.3);min-height:38px}
.tools input{min-width:200px;flex:0 1 240px}
.tools input:focus,.tools select:focus,.cslot select:focus,.calc-tools select:focus{outline:none;border-color:var(--gold);box-shadow:inset 0 3px 0 rgba(0,0,0,.3),0 0 14px rgba(242,201,76,.3)}
.tools select,.cslot select,.calc-tools select{-webkit-appearance:none;appearance:none;padding-right:30px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 3' shape-rendering='crispEdges'%3E%3Cpath fill='%23F2C94C' d='M0 0h5v1H0zM1 1h3v1H1zM2 2h1v1H2z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:10px 6px}
.tools select option,.cslot select option,.calc-tools select option{background:var(--night2);color:var(--cream)}
.chip{all:unset;box-sizing:border-box;cursor:pointer;font:11px/1 var(--caps);letter-spacing:.1em;text-transform:uppercase;color:var(--cream2);border:2px solid var(--wood);background:var(--night3);padding:9px 11px 8px;box-shadow:2px 2px 0 #000;transition:transform .1s steps(2),background .1s steps(2)}
.chip:hover{color:var(--cream);border-color:var(--cream2)}
.chip:active{transform:translate(2px,2px);box-shadow:0 0 0 #000}
.chip:focus-visible{box-shadow:2px 2px 0 #000,var(--glow)}
.chip[aria-pressed="true"]{color:var(--night);background:var(--gold);border-color:var(--gold)}
.chip[aria-pressed="true"]::before{content:"";display:inline-block;width:6px;height:6px;background:var(--night);margin-right:6px;vertical-align:1px}
.tools .glabel{font:10px/1 var(--caps);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-left:8px}
.tools .count{font:11px/1 var(--caps);letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-left:auto;padding:6px 0}
.tscroll{overflow-x:auto;border:3px solid var(--wood);box-shadow:5px 5px 0 #000;margin:8px 0 22px;background:var(--night);scrollbar-width:thin;scrollbar-color:var(--wood) var(--night3)}
.tscroll.fits{overflow:visible}
table{border-collapse:separate;border-spacing:0;width:100%;font-size:21px;line-height:1.2}
th,td{padding:8px 12px 7px;text-align:left;border-bottom:2px solid var(--line);vertical-align:middle}
th{font:11px/1.25 var(--caps);letter-spacing:.1em;text-transform:uppercase;color:var(--gold);background:var(--night3);white-space:nowrap;position:sticky;top:0;z-index:2;border-bottom:3px solid var(--wood);padding-top:12px;padding-bottom:10px}
.tscroll.fits th{top:var(--top)}
th[data-sort]{cursor:pointer;user-select:none;padding-right:26px;position:sticky}
th[data-sort]::after{content:"";position:absolute;right:9px;top:50%;width:9px;height:12px;margin-top:-6px;opacity:.45;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 7' shape-rendering='crispEdges'%3E%3Cpath fill='%23D8CCB0' d='M2 0h1v1H2zM1 1h3v1H1zM0 2h5v1H0zM0 4h5v1H0zM1 5h3v1H1zM2 6h1v1H2z'/%3E%3C/svg%3E") center/9px 12px no-repeat;transition:opacity .1s steps(2)}
th[data-sort]:hover{color:var(--cream);background:var(--night2)}
th[data-sort]:hover::after{opacity:1}
th[aria-sort="ascending"]::after{opacity:1;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 7' shape-rendering='crispEdges'%3E%3Cpath fill='%23F2C94C' d='M2 1h1v1H2zM1 2h3v1H1zM0 3h5v1H0z'/%3E%3Cpath fill='%237A6D57' d='M0 5h5v1H0z'/%3E%3C/svg%3E")}
th[aria-sort="descending"]::after{opacity:1;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 7' shape-rendering='crispEdges'%3E%3Cpath fill='%237A6D57' d='M0 1h5v1H0z'/%3E%3Cpath fill='%23F2C94C' d='M0 3h5v1H0zM1 4h3v1H1zM2 5h1v1H2z'/%3E%3C/svg%3E")}
th[aria-sort]{color:var(--cream);background:var(--night2)}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
th.n[data-sort]{padding-right:26px}
td .mono{font-size:21px}
tbody tr{background:var(--night)}
tbody tr:nth-child(even){background:var(--night2)}
tbody tr:hover{background:#2B3358}
tbody tr:hover td:first-child{box-shadow:inset 4px 0 0 var(--gold)}
tbody tr:last-child td{border-bottom:0}
td.wide{min-width:260px}
td .tag{font:19px/1 var(--body);letter-spacing:0;text-transform:none;padding:2px 6px 1px;margin:2px 3px 2px 0}
td b{color:var(--cream)}
/* sorting: the moved rows blink once */
tbody.fx-sorted tr{animation:rowin .3s steps(3) both;animation-delay:calc(var(--i,0) * 12ms)}
@keyframes rowin{from{opacity:.25;transform:translateX(-6px)}to{opacity:1;transform:none}}

/* ---------- halaman entri ---------- */
.entry{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:10px 36px;align-items:start}
.entry-main{grid-column:1;min-width:0}
/* the infobox is a paper ronda card pinned beside the article */
.infobox{grid-column:2;grid-row:1 / span 3;position:sticky;top:calc(var(--top) + 18px);background:var(--paper);color:var(--ink);box-shadow:6px 6px 0 rgba(0,0,0,.55);margin-top:8px}
.infobox::before{content:"";position:absolute;top:-8px;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--red);box-shadow:inset -3px -3px 0 rgba(0,0,0,.3),1px 2px 0 rgba(0,0,0,.4);z-index:2}
.infobox::after{content:"";position:absolute;right:0;bottom:0;width:26px;height:26px;background:linear-gradient(135deg,#D9CBA4 50%,var(--night) 50%)}
.infobox .pic{display:grid;place-items:center;margin:12px 12px 0;padding:20px;border:3px solid var(--ink);background:radial-gradient(circle at 50% 46%,#323A66,var(--night2) 62%,var(--night3));position:relative;overflow:hidden}
.infobox .pic::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(transparent 0 3px,rgba(0,0,0,.12) 3px 4px);pointer-events:none}
.infobox .pic img{width:128px;height:128px;image-rendering:pixelated;object-fit:contain;filter:drop-shadow(0 5px 0 rgba(0,0,0,.5));animation:idle 2.4s steps(2) infinite}
.infobox .pic.small img{width:104px;height:104px}
.infobox .pic[style*="padding:0"] img{animation:none;filter:none}
@keyframes idle{50%{transform:translateY(-3px)}}
.infobox h2{margin:0;padding:14px 16px 2px;font-size:32px;color:var(--ink);border:0;text-shadow:none;display:block}
.infobox h2::before{display:none}
.infobox .sub{padding:2px 16px 12px;color:var(--brown);font-size:19px;line-height:1.2}
.infobox dl{margin:0 0 12px;display:grid;grid-template-columns:auto 1fr}
.infobox dt,.infobox dd{margin:0;padding:7px 16px 6px;border-top:2px dashed rgba(43,58,103,.2)}
.infobox dt{font:11px/1.8 var(--caps);letter-spacing:.1em;text-transform:uppercase;color:var(--brown);padding-right:6px}
.infobox dd{text-align:right;font-size:21px;line-height:1.15;color:var(--ink)}
.infobox a{color:#8A3B12}
.infobox a:hover{color:var(--red)}
.infobox b{color:var(--ink)}
.infobox .tag{color:var(--ink);border-color:var(--ink)}
.infobox a.tag:hover{background:var(--ink);color:var(--paper)}
.infobox .dim{color:var(--brown)}
.infobox .pos,.infobox .good{color:#2F6E4C}.infobox .neg,.infobox .bad{color:var(--red)}
.infobox .tc0{color:#5E6466}.infobox .tc1{color:#2C67AA}.infobox .tc2{color:#7444AD}.infobox .tc3{color:#B8352F}
.infobox .badge.full{color:#6A3FA0;border-color:#6A3FA0}.infobox .badge.coop{color:#2C67AA;border-color:#2C67AA}
.infobox .spoiler{background:repeating-linear-gradient(135deg,#D9CBA4 0 6px,#CDBE95 6px 12px)}
.infobox .nm{color:var(--ink)}
.quote{font-size:25px;line-height:1.3;color:var(--cream);border-left:4px solid var(--gold);padding:6px 0 6px 18px;margin:16px 0 20px;max-width:64ch;position:relative}
.box{background:var(--night2);border:3px solid var(--wood);box-shadow:5px 5px 0 #000;padding:16px 18px;margin:14px 0 22px}
.box p:last-child{margin-bottom:0}
/* formulas are written in chalk on the warung board */
.formula{font:24px/1.3 var(--body);color:#F4F0E2;background:#1D2A25;border:3px solid var(--wood);box-shadow:4px 4px 0 #000,inset 0 0 24px rgba(0,0,0,.45);padding:10px 16px 9px;margin:10px 0 16px;overflow-x:auto;white-space:nowrap;text-shadow:0 0 1px rgba(244,240,226,.6);
  background-image:radial-gradient(ellipse at 20% 30%,rgba(255,255,255,.04),transparent 50%),radial-gradient(ellipse at 80% 80%,rgba(255,255,255,.03),transparent 40%)}

/* ---------- kartu kategori ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:16px;margin:16px 0 24px}
.card{position:relative;display:flex;gap:14px;align-items:center;background:var(--night2);border:3px solid var(--wood);box-shadow:4px 4px 0 #000;padding:14px;text-decoration:none;color:var(--cream);min-width:0;transition:transform .15s steps(2),box-shadow .15s steps(2),border-color .15s steps(2)}
.card:hover,.card:focus-visible{transform:translateY(-3px);box-shadow:4px 7px 0 #000,0 0 24px rgba(242,201,76,.22);border-color:#9A6C44;color:var(--cream)}
.card:focus-visible{box-shadow:4px 7px 0 #000,var(--glow)}
.card b{display:block;font:27px/1 var(--title);color:var(--gold);margin-bottom:4px;text-shadow:none}
.card span{display:block;font-size:19px;color:var(--cream2);line-height:1.2}
.card .ic{width:48px;height:48px;filter:drop-shadow(0 4px 0 rgba(0,0,0,.55))}
.card:hover .ic{animation:hop .4s steps(2)}
.card::after{content:"";position:absolute;right:10px;top:10px;width:8px;height:8px;border-top:2px solid var(--wood);border-right:2px solid var(--wood);transition:transform .15s steps(2),border-color .15s steps(2)}
.card:hover::after{border-color:var(--gold);transform:translate(2px,-2px)}
/* warga as posters on the kampung board */
.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(262px,1fr));gap:24px 20px;margin:24px 0 26px}
.person{position:relative;background:var(--paper);color:var(--ink);text-decoration:none;display:grid;grid-template-columns:96px 1fr;gap:14px;padding:12px 14px 14px 12px;align-items:start;box-shadow:4px 6px 0 rgba(0,0,0,.5);transform-origin:50% 0;transform:rotate(var(--r,-.8deg));transition:box-shadow .15s steps(2)}
.person:nth-child(even){--r:.9deg}
.person:nth-child(3n){--r:-.4deg}
.person::before{content:"";position:absolute;top:-7px;left:50%;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--red);box-shadow:inset -3px -3px 0 rgba(0,0,0,.3),1px 2px 0 rgba(0,0,0,.4)}
.person:hover,.person:focus-visible{animation:sway 1.2s steps(6) infinite;box-shadow:4px 8px 0 rgba(0,0,0,.5),0 0 0 2px var(--gold),0 0 22px rgba(242,201,76,.35);z-index:2;color:var(--ink)}
@keyframes sway{0%,100%{transform:rotate(calc(var(--r) - 1.6deg))}50%{transform:rotate(calc(var(--r) + 1.6deg))}}
.person>img{width:96px;height:96px;image-rendering:pixelated;background:radial-gradient(circle at 50% 45%,#323A66,var(--night2) 70%);border:3px solid var(--green);object-fit:contain}
.person b{font:28px/1 var(--title);color:var(--ink);display:block;text-shadow:none}
.person div>span:not(.badge){font-size:19px;color:var(--brown);display:block;line-height:1.2;margin-top:6px}
.person .badge{margin:6px 0 0;vertical-align:0}
.person .badge.full{color:#6A3FA0;border-color:#6A3FA0}
.person .ic.sm{width:26px;height:26px;margin-right:2px;filter:drop-shadow(1px 2px 0 rgba(43,58,103,.35))}
.maps{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;margin:16px 0 24px}
.map{background:var(--night2);border:3px solid var(--wood);box-shadow:5px 5px 0 #000;text-decoration:none;color:var(--cream);overflow:hidden;padding:10px 10px 0;transition:transform .15s steps(2),box-shadow .15s steps(2)}
.map:hover,.map:focus-visible{transform:translateY(-3px);box-shadow:5px 8px 0 #000,0 0 24px rgba(242,201,76,.2);color:var(--cream)}
.map:focus-visible{box-shadow:5px 8px 0 #000,var(--glow)}
.map img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border:2px solid #000;transition:transform .4s steps(4)}
.map:hover img{transform:scale(1.05)}
.map div{padding:12px 4px 14px;position:relative;background:var(--night2)}
.map b{font:30px/1 var(--title);color:var(--gold);display:block;text-shadow:none}
.map span{font-size:19px;color:var(--cream2);display:block;margin-top:4px}

/* ---------- beranda ---------- */
.hero{position:relative;border:3px solid var(--wood);box-shadow:6px 6px 0 #000;overflow:hidden;margin-bottom:28px;isolation:isolate;min-height:clamp(420px,46vw,520px);display:flex;flex-direction:column;justify-content:flex-start;background:var(--night3)}
.hero .bg{position:absolute;inset:0;z-index:-3;background:var(--night3) url(../aset/img/hero-1920.webp) 70% 50%/cover no-repeat;image-rendering:pixelated}
.hero.fx-scene .bg{background-image:none}
.hero.fx-scene .in{padding-bottom:calc(var(--px) * 22 + 8px)}
.hero canvas{position:absolute;left:0;top:0;z-index:-2;image-rendering:pixelated;image-rendering:crisp-edges;pointer-events:none}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(14,17,32,.88) 0%,rgba(14,17,32,.62) 40%,rgba(14,17,32,.1) 72%,transparent)}
.hero .in{position:relative;padding:clamp(24px,4vw,46px) clamp(20px,4vw,46px) 26px;max-width:860px}
.hero .in>.mono{display:inline-block;font:11px/1 var(--caps);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);border:2px solid var(--gold);padding:7px 10px;background:rgba(14,17,32,.6)}
.hero h1{font-size:clamp(56px,8vw,104px);color:var(--gold);margin-top:16px;text-shadow:0 5px 0 #6B4A12,0 0 30px rgba(242,201,76,.35);letter-spacing:.03em}
.hero h1 .ch{display:inline-block}
.hero .lede{color:var(--cream);font-size:clamp(22px,2vw,26px);text-shadow:0 2px 0 rgba(0,0,0,.75);max-width:34em}
/* the numbers read like the member card on the main page */
.nums{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));margin:22px 0 4px;max-width:820px;border:3px double var(--cream2);outline:3px solid var(--night3);outline-offset:-9px;background:rgba(30,36,64,.92);padding:6px;box-shadow:5px 5px 0 #000}
.nums a{display:block;text-align:center;padding:14px 4px 10px;text-decoration:none;color:var(--cream2);font:10px/1.3 var(--caps);letter-spacing:.08em;text-transform:uppercase;border-left:2px solid rgba(216,204,176,.18);transition:background .12s steps(2)}
.nums a:first-child{border-left:0}
.nums a:hover{background:rgba(242,201,76,.1);color:var(--cream)}
.nums a:focus-visible{box-shadow:var(--glow);position:relative;z-index:1}
.nums b{display:block;font:400 clamp(36px,4vw,50px)/1 var(--title);color:var(--gold);text-shadow:0 4px 0 #6B4A12;font-variant-numeric:tabular-nums;margin-bottom:6px}
.nums a:hover b{animation:hop .35s steps(2)}

/* ---------- pohon Ilmu ---------- */
.tree{display:grid;grid-template-columns:repeat(3,minmax(232px,1fr));gap:16px;overflow-x:auto;padding:4px 6px 10px 0}
.tree .col{background:rgba(14,17,32,.5);border:3px solid var(--wood);padding:12px 12px 6px;box-shadow:4px 4px 0 #000}
.tree .col h3{margin:0 0 4px;font-size:28px}
.tree .col .role{font:10px/1.4 var(--caps);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);display:block}
.tier-row{font:10px/1 var(--caps);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:16px 0 8px;display:flex;align-items:center;gap:8px}
.tier-row::after{content:"";flex:1;height:2px;background:repeating-linear-gradient(90deg,rgba(242,201,76,.4) 0 4px,transparent 4px 8px)}
.node{position:relative;background:var(--night2);border:2px solid rgba(216,204,176,.25);padding:9px 11px 8px;margin-bottom:8px;font-size:19px;line-height:1.22;box-shadow:3px 3px 0 #000;transition:border-color .12s steps(2),transform .12s steps(2)}
.node:hover{border-color:var(--gold);transform:translateX(2px)}
.node b{display:block;color:var(--cream);font:23px/1 var(--title);margin-bottom:4px;text-shadow:none}
.node .r{color:var(--cream2)}
.node details summary{cursor:pointer;font:10px/1.8 var(--caps);letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-top:4px;list-style:none}
.node details summary::-webkit-details-marker{display:none}
.node details summary::before{content:"";display:inline-block;width:0;height:0;border-left:6px solid var(--gold);border-top:4px solid transparent;border-bottom:4px solid transparent;margin-right:7px;transition:transform .12s steps(2)}
.node details[open] summary::before{transform:rotate(90deg)}
.node details[open]{animation:show .2s steps(2)}
@keyframes show{from{opacity:0}to{opacity:1}}

/* ---------- build dan kalkulator (Dewa Tempa) ---------- */
.builds{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;margin:16px 0 20px}
.bcard{background:var(--night2);border:3px solid var(--wood);box-shadow:5px 5px 0 #000;padding:16px 18px;transition:transform .15s steps(2),box-shadow .15s steps(2)}
.bcard:hover{transform:translateY(-3px);box-shadow:5px 8px 0 #000,0 0 24px rgba(242,201,76,.18)}
.bcard h3{margin:0 0 6px;font-size:30px;color:var(--gold)}
.bcard p{margin:6px 0}
.bcard .btn,.calc-tools .btn{display:inline-block;margin-top:10px}
dl.kv{display:grid;grid-template-columns:max-content 1fr;gap:6px 14px;margin:10px 0;font-size:20px;line-height:1.2}
dl.kv dt{font:10px/2 var(--caps);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
dl.kv dd{margin:0}
.calc-tools{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin:12px 0 18px;padding:12px 14px;background:var(--night3);border:3px solid var(--wood);box-shadow:4px 4px 0 #000}
.calc-tools label{font:10px/1 var(--caps);letter-spacing:.1em;text-transform:uppercase;color:var(--cream2);display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.calc-tools .btn{margin-top:0}
.calc{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:22px;align-items:start;margin-bottom:20px}
.cslots{display:grid;grid-template-columns:repeat(auto-fill,minmax(264px,1fr));gap:14px}
.cslot{background:var(--night2);border:3px solid var(--wood);box-shadow:4px 4px 0 #000;padding:10px 12px 12px;transition:border-color .15s steps(2)}
.cslot:focus-within{border-color:var(--gold)}
.chead{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px;padding-bottom:8px;border-bottom:2px dashed rgba(216,204,176,.2)}
.chead:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.chead b{font:24px/1 var(--title);color:var(--gold);text-shadow:none}
.crow{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:6px 0}
.crow .lab{font:10px/1 var(--caps);letter-spacing:.08em;text-transform:uppercase;color:var(--dim);min-width:84px}
.crow .val{font-size:21px;margin-left:auto}
.cslot select,.calc-tools select{font-size:19px;padding:5px 26px 4px 8px;min-height:32px;max-width:100%;background-position:right 8px center}
.cslot .dim.small{margin-top:6px;font-size:17px}
/* the result prints out as a warung receipt */
.cout{position:sticky;top:calc(var(--top) + 14px);max-height:calc(100vh - var(--top) - 28px);overflow:auto;background:#FBF6E6;color:#2A2A2A;padding:18px 20px 34px;box-shadow:5px 6px 0 rgba(0,0,0,.45);scrollbar-width:thin;
  -webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 10px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/14px 10px repeat-x;
  mask:linear-gradient(#000 0 0) top/100% calc(100% - 10px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/14px 10px repeat-x}
.cout::before{content:"NOTA TEMPA \00B7  MBOK SUM";display:block;text-align:center;font:11px/1 var(--caps);letter-spacing:.16em;color:#777;padding-bottom:12px;margin-bottom:6px;border-bottom:2px dashed #999}
.cout h3{margin:14px 0 8px;font-size:26px;color:#2A2A2A}
.cout p{font-size:20px;line-height:1.25}
.cout b{color:#2A2A2A}
.cout .dim{color:#6F6A5C}
.cout .good{color:#2F6E4C}.cout .bad{color:var(--red)}
.cout table{width:100%;font-size:20px}
.cout th{position:static;background:transparent;color:#555;border-bottom:2px dashed #999;padding:6px 6px 6px 0}
.cout td{border-bottom:1px dotted #bbb;padding:5px 6px 4px 0}
.cout tbody tr,.cout tbody tr:nth-child(even),.cout tbody tr:hover{background:transparent}
.cout tbody tr:hover td:first-child{box-shadow:none}
.cout tbody tr:last-child td{border-bottom:0}
.cout.fx-print{animation:print .5s steps(6)}
@keyframes print{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}

/* ---------- gerak (wiki-fx.js) ---------- */
main.fx-in{animation:pagein .32s steps(4)}
@keyframes pagein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.fx-rv{opacity:0;transform:translateY(12px)}
.fx-rv.fx-on{animation:rise .36s steps(4) forwards;animation-delay:calc(var(--i,0) * 45ms)}
.person.fx-rv{transform:translateY(-26px) rotate(-8deg)}
.person.fx-rv.fx-on{animation:pin .5s steps(6) forwards;animation-delay:calc(var(--i,0) * 55ms)}
@keyframes rise{to{opacity:1;transform:none}}
@keyframes pin{0%{opacity:1;transform:translateY(-26px) rotate(-8deg)}70%{opacity:1;transform:translateY(3px) rotate(calc(var(--r) + 2deg))}100%{opacity:1;transform:rotate(var(--r))}}
tr.fx-row{animation:rowin .3s steps(3) both;animation-delay:calc(var(--i,0) * 22ms)}
.hero .fx-up{opacity:0;animation:rise .5s steps(5) forwards;animation-delay:var(--d,0s);transform:translateY(14px)}
.hero h1 .ch{opacity:0;transform:translateY(-30px);animation:drop .36s steps(4) forwards;animation-delay:calc(.15s + var(--i) * .07s)}
@keyframes drop{0%{opacity:1;transform:translateY(-30px)}70%{opacity:1;transform:translateY(4px)}100%{opacity:1;transform:none}}
.totop{all:unset;box-sizing:border-box;position:fixed;right:18px;bottom:18px;z-index:25;width:46px;height:46px;cursor:pointer;background:var(--night3);border:2px solid var(--wood);box-shadow:3px 3px 0 #000;display:grid;place-items:center;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .2s steps(3),transform .2s steps(3)}
.totop.on{opacity:1;transform:none;pointer-events:auto}
.totop::before{content:"";width:0;height:0;border-bottom:10px solid var(--gold);border-left:9px solid transparent;border-right:9px solid transparent;margin-top:-3px}
.totop:hover{background:var(--gold);border-color:var(--gold)}
.totop:hover::before{border-bottom-color:var(--night)}
.totop:focus-visible{box-shadow:3px 3px 0 #000,var(--glow)}

@media (max-width:1100px){
  .nums{grid-template-columns:repeat(4,minmax(0,1fr))}
  .nums a:nth-child(5){border-left:0}
  .nums a:nth-child(n+5){border-top:2px solid rgba(216,204,176,.18)}
}
@media (max-width:980px){
  .entry{grid-template-columns:1fr}
  .infobox{grid-column:1;grid-row:auto;position:relative;top:auto;max-width:560px;order:-1;margin:14px 0 18px;display:grid;grid-template-columns:132px minmax(0,1fr);align-content:start}
  .infobox .pic{grid-row:span 2;margin:12px 0 0 12px;padding:10px;align-self:start}
  .infobox .pic img,.infobox .pic.small img{width:96px;height:96px}
  .infobox .pic[style*="padding:0"]{grid-column:1 / -1;grid-row:auto;margin:12px 12px 0}
  .infobox h2{grid-column:2;padding-top:16px}
  .infobox .sub{grid-column:2}
  .infobox dl{grid-column:1 / -1;margin-top:10px}
  .entry-main{grid-column:1}
}
@media (max-width:900px){.calc{grid-template-columns:1fr}.cout{position:relative;top:auto;max-height:none}}
@media (max-width:820px){
  :root{--top:58px}
  .shell{grid-template-columns:minmax(0,1fr)}
  .menu-btn{display:block;padding:9px 11px 8px}
  .side{position:fixed;top:var(--top);left:0;bottom:0;width:min(300px,86vw);height:auto;background:var(--night);z-index:29;transform:translateX(-104%);transition:transform .22s steps(4);border-right:3px solid var(--wood);visibility:hidden}
  .side.open{transform:none;box-shadow:12px 0 0 rgba(0,0,0,.45);visibility:visible}
  .brand small{display:none}
  .brand span{font-size:28px}
  .spoil-btn{font-size:0;padding:9px 10px 8px}
  .spoil-btn::before{margin-right:6px}
  .spoil-btn::after{content:"Spoiler";font-size:11px}
  .tree{grid-template-columns:minmax(0,1fr)}
  .search .kbd{display:none}
  .search input{padding-right:12px}
}
@media (max-width:620px){
  .nums{grid-template-columns:repeat(3,minmax(0,1fr))}
  .nums a{border-left:2px solid rgba(216,204,176,.18);border-top:2px solid rgba(216,204,176,.18)}
  .nums a:nth-child(-n+3){border-top:0}
  .nums a:nth-child(3n+1){border-left:0}
  .nums a:nth-child(n+5){border-top:2px solid rgba(216,204,176,.18)}
  .nums a:last-child{grid-column:span 3}
}
@media (max-width:520px){
  body{font-size:20px}
  .top-in{gap:8px;padding-inline:10px}
  .brand img{display:none}
  .brand span{font-size:26px}
  .search::before{left:9px}
  .search input{padding-left:32px;font-size:19px}
  main{padding:22px 16px 64px}
  h2{margin-top:36px}
  .hero{min-height:0}
  .hero.fx-scene .in{padding-bottom:calc(var(--px) * 40 + 8px)}
  .hero::after{background:linear-gradient(180deg,rgba(14,17,32,.9) 0%,rgba(14,17,32,.72) 50%,rgba(14,17,32,.2) 80%,transparent)}
  .hero .in{padding:22px 16px 20px}
  .nums b{font-size:36px}
  .person{grid-template-columns:76px 1fr;gap:12px}
  .person>img{width:76px;height:76px}
  .tools input{flex:1 1 100%}
  .tools .count{margin-left:0}
  .infobox{max-width:none}
  .totop{right:12px;bottom:12px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .fx-rv,.hero .fx-up,.hero h1 .ch{opacity:1!important;transform:none!important}
  .person.fx-rv{transform:rotate(var(--r))!important}
}