/* Simulasi build (sim.js). Uses the site tokens from wiki.css (:root custom properties). */
.sim-head{display:flex;flex-wrap:wrap;gap:18px 28px;align-items:flex-end;justify-content:space-between;margin-bottom:18px}
.sim-head>div:first-child{max-width:720px}
.sim-head h1{margin-top:10px}
.sim-presets{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.sim-presets label{font:12px/1 var(--caps,monospace);letter-spacing:.1em;text-transform:uppercase;color:var(--cream2,#D8CCB0);display:flex;gap:8px;align-items:center}
.sim select,.sim-presets select{font:inherit;font-family:var(--body,monospace);font-size:19px;background:var(--night3,#0E1120);color:var(--cream,#F7ECC9);border:2px solid var(--wood,#7A5434);padding:4px 8px;border-radius:0}

.sim-wrap{container-type:inline-size}
.sim{display:grid;gap:18px}
.sim-build,.sim-out{display:grid;gap:18px;align-content:start;min-width:0}
/* one column: warga and weapons, then the arena and the numbers, then the tabs and the tables */
@container (max-width:1059px){
  .sim-build,.sim-out{display:contents}
  .sim-warga{order:1}.sim-senjata{order:2}.sim-arena-card{order:3}.sim-big-card{order:4}.sim-tabs-card{order:5}.sim-two{order:6}.sim-wtab-card{order:7}.sim-stats-card{order:8}
}
@container (min-width:1060px){
  .sim{grid-template-columns:minmax(360px,430px) 1fr}
  .sim-out{position:sticky;top:76px;container-type:inline-size}
}
.sim-card{background:var(--night2,#1E2440);border:3px solid var(--wood,#7A5434);box-shadow:4px 4px 0 #000;padding:14px 16px 16px;min-width:0}
.sim-card h3{margin:0 0 12px;font-family:var(--title,sans-serif);font-size:28px;color:var(--cream,#F7ECC9);display:flex;gap:10px;align-items:baseline}
.sim-card h3 .dim{font:12px/1 var(--caps,monospace);letter-spacing:.1em}
.sim .small{font-size:16px}
.sim .good{color:#8FD6A6}.sim .bad{color:#FF938F}

/* warga */
.sim-chars{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.sim-char{all:unset;cursor:pointer;display:grid;justify-items:center;gap:2px;padding:6px 2px 4px;background:var(--night3,#0E1120);border:2px solid transparent;transition:transform .12s steps(2),border-color .12s steps(2)}
.sim-char img{width:64px;height:64px;image-rendering:pixelated}
.sim-char span{font:10px/1.1 var(--caps,monospace);letter-spacing:.06em;text-transform:uppercase;color:var(--cream2,#D8CCB0);text-align:center}
.sim-char:hover{transform:translateY(-2px);border-color:var(--wood,#7A5434)}
.sim-char.on{border-color:var(--gold,#F2C94C);box-shadow:0 0 0 2px #000,0 0 14px rgba(242,201,76,.35)}
.sim-char.on img{animation:sim-bob .6s steps(2) infinite}
.sim-char:focus-visible,.sim button:focus-visible,.sim-presets button:focus-visible{outline:none;box-shadow:0 0 0 2px var(--gold,#F2C94C),0 0 18px rgba(242,201,76,.45)}
@keyframes sim-bob{50%{transform:translateY(-2px)}}
.sim-cinfo{display:flex;gap:12px;margin:12px 0 4px;align-items:flex-start}
.sim-port{width:72px;height:72px;image-rendering:pixelated;border:2px solid var(--wood,#7A5434);background:var(--night3,#0E1120);flex:none}
.sim-cinfo div{display:grid;gap:3px;font-size:18px;line-height:1.2}
.sim-cinfo b{font-family:var(--title,sans-serif);font-size:24px;font-weight:400;color:var(--gold,#F2C94C)}
.sim-range{display:flex;align-items:center;gap:10px;font:12px/1 var(--caps,monospace);letter-spacing:.1em;text-transform:uppercase;color:var(--cream2,#D8CCB0);margin-top:10px}
.sim-range input{flex:1;min-width:60px;accent-color:var(--gold,#F2C94C)}
.sim-range output{font:22px/1 var(--title,sans-serif);color:var(--gold,#F2C94C);min-width:2ch;text-align:right}

/* weapons */
.sim-slots{display:grid;gap:6px}
.sim-slot{display:grid;grid-template-columns:44px 1fr auto auto;gap:4px 10px;align-items:center;background:var(--night3,#0E1120);border:2px solid #000;padding:5px 8px 5px 5px;position:relative;animation:sim-in .25s steps(3) both}
.sim-slot.full{border-left:4px solid var(--tc,#D0D5D6)}
.sim-slot.bad{opacity:.55}
.sim-slot b{font-family:var(--title,sans-serif);font-weight:400;font-size:21px;color:var(--cream,#F7ECC9);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sim-slot-pic{all:unset;cursor:pointer;width:44px;height:44px;display:grid;place-items:center;background:#000}
.sim-slot-pic img{width:40px;height:40px;image-rendering:pixelated}
.sim-slot-pic:hover img{animation:sim-wig .3s steps(3)}
@keyframes sim-wig{33%{transform:rotate(-8deg)}66%{transform:rotate(8deg)}}
.sim-fus{position:absolute;left:52px;bottom:2px;font:9px/1 var(--caps,monospace);letter-spacing:.08em;text-transform:uppercase;color:#FF938F}
.sim-slot.empty{grid-template-columns:1fr;border-style:dashed;border-color:var(--wood,#7A5434);padding:0}
.sim-add{all:unset;cursor:pointer;padding:12px;text-align:center;font:12px/1 var(--caps,monospace);letter-spacing:.12em;text-transform:uppercase;color:var(--cream2,#D8CCB0)}
.sim-add:hover{color:var(--gold,#F2C94C);background:rgba(242,201,76,.06)}
.sim-tiers{display:inline-flex;gap:2px}
.sim-tiers button{all:unset;cursor:pointer;font:11px/1 var(--caps,monospace);padding:5px 6px;min-width:14px;text-align:center;background:#000;color:#6E7488;border:1px solid #2A2F40}
.sim-tiers button.on{color:#000;border-color:#000}
.sim-tiers button.tc0.on{background:#D0D5D6}.sim-tiers button.tc1.on{background:#78BAFF}.sim-tiers button.tc2.on{background:#C49AF5}.sim-tiers button.tc3.on{background:#FF938F}
.sim-tiers button:not(.on):hover{color:var(--cream,#F7ECC9)}
.sim-tiers.sm button{padding:4px 5px;font-size:10px}
.sim-x{all:unset;cursor:pointer;width:24px;height:24px;display:grid;place-items:center;font:22px/1 var(--title,sans-serif);color:var(--cream2,#D8CCB0)}
.sim-x:hover{color:#FF938F}
.sim-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.sim-tagb{font:11px/1 var(--caps,monospace);letter-spacing:.06em;text-transform:uppercase;padding:5px 7px;border:1px solid #2A2F40;color:#6E7488;background:#000}
.sim-tagb b{font-weight:400;color:inherit}
.sim-tagb.on{color:var(--night,#14182B);background:var(--gold,#F2C94C);border-color:#000;animation:sim-lit .5s steps(3)}
.sim-tagb em{font-style:normal}
@keyframes sim-lit{0%{transform:scale(1.15)}100%{transform:none}}
.sim-pick{margin-top:12px;border:2px solid var(--gold,#F2C94C);background:var(--night3,#0E1120);padding:10px;animation:sim-in .2s steps(3) both}
.sim-pick-top{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:10px}
.sim-pick-top b{font-family:var(--title,sans-serif);font-weight:400;font-size:21px;color:var(--gold,#F2C94C);margin-right:auto}
.sim-pick .sim-chip{all:unset;cursor:pointer;font:11px/1 var(--caps,monospace);letter-spacing:.08em;text-transform:uppercase;padding:6px 8px;border:1px solid var(--wood,#7A5434);color:var(--cream2,#D8CCB0)}
.sim-pick .sim-chip.on{background:var(--gold,#F2C94C);color:var(--night,#14182B);border-color:var(--gold,#F2C94C)}
.sim-pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(122px,1fr));gap:6px;max-height:330px;overflow:auto;padding-right:4px}
.sim-wopt{all:unset;cursor:pointer;display:grid;justify-items:center;text-align:center;gap:2px;padding:8px 4px;background:var(--night2,#1E2440);border:2px solid transparent}
.sim-wopt img{width:48px;height:48px;image-rendering:pixelated}
.sim-wopt b{font-family:var(--title,sans-serif);font-weight:400;font-size:18px;color:var(--cream,#F7ECC9);line-height:1}
.sim-wopt span{font-size:15px;color:var(--cream2,#D8CCB0);line-height:1}
.sim-wopt:hover{border-color:var(--gold,#F2C94C);transform:translateY(-2px)}
.sim-wopt.off{opacity:.35;cursor:not-allowed}
@keyframes sim-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* tabs: cards, goods, gear */
.sim-tabs{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:12px;border-bottom:2px solid var(--wood,#7A5434)}
.sim-tabs button{all:unset;cursor:pointer;font:12px/1 var(--caps,monospace);letter-spacing:.1em;text-transform:uppercase;padding:9px 10px;color:var(--cream2,#D8CCB0);border:2px solid transparent;border-bottom:0;margin-bottom:-2px}
.sim-tabs button[aria-selected=true]{color:var(--gold,#F2C94C);border-color:var(--wood,#7A5434);background:var(--night3,#0E1120)}
.sim-cards{display:grid;gap:4px}
.sim-crow{display:grid;grid-template-columns:18px minmax(80px,1fr) auto auto 56px;gap:8px;align-items:center;padding:4px 6px;background:var(--night3,#0E1120)}
.sim-crow .dim{display:none}
.sim-crow b{font-weight:400;font-size:19px;color:var(--cream,#F7ECC9)}
.sim-crow .val{text-align:right;font-size:18px}
.sim-step{display:inline-flex;align-items:center;border:1px solid var(--wood,#7A5434)}
.sim-step button{all:unset;cursor:pointer;width:24px;height:24px;display:grid;place-items:center;font:20px/1 var(--title,sans-serif);color:var(--cream,#F7ECC9);background:#000}
.sim-step button:hover{background:var(--gold,#F2C94C);color:var(--night,#14182B)}
.sim-step output{min-width:34px;text-align:center;font-size:19px;color:var(--gold,#F2C94C)}
.sim-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:5px;max-height:440px;overflow:auto;padding-right:4px}
.sim-item{display:grid;grid-template-columns:36px 1fr auto;gap:8px;align-items:center;padding:4px 6px;background:var(--night3,#0E1120);border-left:3px solid var(--tc,#D0D5D6)}
.sim-item img{width:32px;height:32px;image-rendering:pixelated}
.sim-item div{display:grid;line-height:1.05;min-width:0}
.sim-item b{font-weight:400;font-size:18px;color:var(--cream,#F7ECC9)}
.sim-item span{font-size:15px;color:var(--cream2,#D8CCB0)}
.sim-item.on{background:#1B2238;box-shadow:inset 0 0 0 1px rgba(242,201,76,.35)}
.sim-gear{display:flex;flex-wrap:wrap;gap:6px}
.sim-gear span{font-size:18px;padding:2px 8px;background:var(--night3,#0E1120);border:1px solid #2A2F40}

/* arena */
.sim-arena-card{padding:12px}
.sim-enemy{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;margin-bottom:10px}
.sim-enemy label:first-child{font:12px/1 var(--caps,monospace);letter-spacing:.1em;text-transform:uppercase;color:var(--cream2,#D8CCB0);display:flex;gap:8px;align-items:center}
.sim-enemy .sim-range{margin-top:0;flex:1 1 170px}
.sim-arena{position:relative;background:#0B0E14;border:3px solid #000;box-shadow:inset 0 0 0 2px var(--wood,#7A5434);overflow:hidden;line-height:0}
.sim-arena canvas{display:block;image-rendering:pixelated;image-rendering:crisp-edges;margin:0 auto}
.sim-hud{position:absolute;left:8px;right:8px;top:8px;display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font:12px/1 var(--caps,monospace);letter-spacing:.08em;text-transform:uppercase;color:var(--cream2,#D8CCB0);text-shadow:1px 1px 0 #000;pointer-events:none}
.sim-hud b{font:20px/1 var(--title,sans-serif);color:var(--gold,#F2C94C);letter-spacing:0;margin-left:4px}
.sim-hp{position:relative;width:150px;height:16px;background:#000;border:2px solid #000;box-shadow:0 0 0 1px var(--wood,#7A5434)}
.sim-hp i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(#E0665F,#B5332E);transition:width .2s steps(4)}
.sim-hp b{position:absolute;inset:0;display:grid;place-items:center;font:14px/1 var(--title,sans-serif)!important;color:var(--cream,#F7ECC9)!important;margin:0!important}
.sim-banner{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--paper,#EFE3C2);color:var(--ink,#2B3A67);border:3px solid #000;box-shadow:6px 6px 0 #000;padding:14px 20px;text-align:center;display:grid;gap:6px;line-height:1.2;animation:sim-stamp .35s steps(4) both;max-width:80%}
.sim-banner b{font:30px/1 var(--title,sans-serif)}
.sim-banner span{font-size:18px}
@keyframes sim-stamp{0%{transform:translate(-50%,-50%) scale(1.6) rotate(-6deg);opacity:0}100%{transform:translate(-50%,-50%) scale(1) rotate(-2deg);opacity:1}}
.sim-ctl{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
.sim-ctl .sim-range{margin-top:0;flex:1 1 200px;min-width:0}
.sim-seg{display:inline-flex;border:2px solid var(--wood,#7A5434)}
.sim-seg button{all:unset;cursor:pointer;font:11px/1 var(--caps,monospace);letter-spacing:.08em;text-transform:uppercase;padding:8px 9px;color:var(--cream2,#D8CCB0);background:var(--night3,#0E1120)}
.sim-seg button[aria-pressed=true]{background:var(--gold,#F2C94C);color:var(--night,#14182B)}
.sim-chk{font:12px/1 var(--caps,monospace);letter-spacing:.08em;text-transform:uppercase;color:var(--cream2,#D8CCB0);display:flex;gap:6px;align-items:center}
.sim-chk input{accent-color:var(--gold,#F2C94C)}

/* the big numbers */
.sim-big{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.sim-num{display:grid;gap:4px;padding:6px 8px;border-left:3px solid var(--gold,#F2C94C);background:var(--night3,#0E1120)}
.sim-num span{font:11px/1.2 var(--caps,monospace);letter-spacing:.08em;text-transform:uppercase;color:var(--cream2,#D8CCB0)}
.sim-num b{font:36px/1 var(--title,sans-serif);font-weight:400;color:var(--gold,#F2C94C)}
.sim-num em{font-style:normal;font-size:15px;color:var(--brown,#7A6D57);line-height:1.1}
.sim-num.pop b{animation:sim-pop .3s steps(3)}
@keyframes sim-pop{0%{transform:scale(1.25);color:#FFF3C4}100%{transform:none}}
@container (max-width:620px){.sim-big{grid-template-columns:repeat(2,1fr)}}

.sim-two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@container (max-width:760px){.sim-two{grid-template-columns:1fr}}
.sim-radar{width:100%;max-width:300px;display:block;margin:0 auto;overflow:visible}
.sim-radar .g{fill:none;stroke:#2E3550;stroke-width:1}
.sim-radar .v{fill:rgba(242,201,76,.28);stroke:var(--gold,#F2C94C);stroke-width:2;stroke-linejoin:miter}
.sim-radar text{font:10px var(--caps,monospace);letter-spacing:.06em;fill:var(--cream2,#D8CCB0);text-transform:uppercase}
.sim-t{width:100%;font-size:18px}
.sim-t td,.sim-t th{padding:5px 8px}
.sim-t .nm{display:inline-flex;gap:6px;align-items:center;white-space:nowrap}
.sim-share{display:block;height:4px;background:#000;margin-top:3px}
.sim-share i{display:block;height:100%;background:var(--gold,#F2C94C);transition:width .3s steps(5)}

/* final stats */
.sim-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:4px 16px}
.sim-stat{display:grid;grid-template-columns:18px 112px 1fr 56px;gap:8px;align-items:center;font-size:18px;padding:2px 0;cursor:help}
.sim-stat b{font-weight:400;color:var(--cream,#F7ECC9);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sim-stat output{text-align:right;color:var(--gold,#F2C94C)}
.sim-stat.neg output{color:#FF938F}
.sim-stat.zero{opacity:.45}
.sim-bar{height:8px;background:#000;border:1px solid #2A2F40;position:relative}
.sim-bar i{position:absolute;left:0;top:0;bottom:0;background:var(--gold,#F2C94C);transition:width .35s steps(6)}
.sim-stat.neg .sim-bar i{background:#B5332E}

@media (max-width:520px){
  .sim-chars{grid-template-columns:repeat(4,1fr)}
  .sim-char img{width:48px;height:48px}
  .sim-crow{grid-template-columns:18px 1fr auto 52px}
  .sim-crow .sim-tiers{grid-column:2 / -1}
  .sim-stat{grid-template-columns:18px 96px 1fr 50px}
  .sim-hp{width:110px}
}
@media (prefers-reduced-motion:reduce){
  .sim *,.sim *::before{animation:none!important;transition:none!important}
}

/* "Coba di simulasi" on the weapon and warga cards */
.infobox .sim-go{margin:6px 14px 30px}
.infobox .sim-go .btn{display:block;text-align:center;background:var(--night,#14182B);color:var(--gold,#F2C94C);border:2px solid #000;box-shadow:3px 3px 0 rgba(0,0,0,.45);text-decoration:none}
.infobox .sim-go .btn:hover{background:var(--gold,#F2C94C);color:var(--night,#14182B)}