/* ================= MISI PEMULA (js/novice.js) + reaksi benteng + kartu Hadiah Pembangun ================= */

/* Chip di menu utama: hanya ikon dan pecahan supaya baris chip tidak melebar */
.mn-novchip { display: inline-flex; align-items: center; gap: 5px; position: relative; }
.mn-novchip[hidden] { display: none; }
.mn-novchip b { font: 800 12px Nunito, system-ui, sans-serif; }
.mn-novchip.hot { border-color: #FACC15; box-shadow: 0 0 0 2px rgba(250,204,21,.35); animation: nvPulse 1.8s ease-in-out infinite; }
@keyframes nvPulse { 0%, 100% { box-shadow: 0 0 0 2px rgba(250,204,21,.25); } 50% { box-shadow: 0 0 12px 3px rgba(250,204,21,.7); } }

.nv-wrap { display: flex; flex-direction: column; gap: 10px; max-width: 640px; width: 100%; margin: 0 auto; }
.nv-list { display: flex; flex-direction: column; gap: 8px; }
.nv-row, .nv-bonus { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border: 3px solid #1E1A24; border-radius: 16px; background: rgba(8,12,28,.74); box-shadow: 0 4px 0 rgba(0,0,0,.4); }
.nv-row.done, .nv-bonus.ready { border-color: #FACC15; background: linear-gradient(90deg, rgba(250,204,21,.16), rgba(8,12,28,.74) 60%); }
.nv-row.claimed, .nv-bonus.claimed { opacity: .65; }
.nv-ic { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; font-size: 22px; border-radius: 12px; background: rgba(255,255,255,.08); border: 2px solid rgba(255,255,255,.14); }
.nv-t { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.nv-t b { font: 800 14px Nunito, system-ui, sans-serif; color: #fff; }
.nv-t small { font: 700 11.5px Nunito, system-ui, sans-serif; color: #A5B4FC; }
.nv-ok { font-size: 22px; color: #86EFAC; padding: 0 8px; }
.nv-btn { flex: 0 0 auto; display: inline-flex; flex-direction: column; align-items: center; gap: 0; padding: 6px 14px; font-size: 13px; line-height: 1.15; }
.nv-btn em { font: 800 10.5px Nunito, system-ui, sans-serif; font-style: normal; color: #FDE68A; }
.nv-btn.off, .ox-btn.off.nv-btn { filter: grayscale(.8) brightness(.7); }

/* Reaksi cepat di detail benteng */
.ox-react h3 { margin: 0 0 8px; }
.ox-react-row { display: flex; flex-wrap: wrap; gap: 8px; }
.ox-rx { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; cursor: pointer; color: #E2E8F0; font: 800 13px Nunito, system-ui, sans-serif;
  background: rgba(255,255,255,.07); border: 2.5px solid rgba(255,255,255,.16); border-radius: 14px; transition: transform .12s; }
.ox-rx i { font-style: normal; font-size: 20px; }
.ox-rx b { font: 400 14px Bungee, Impact, sans-serif; color: #FDE68A; margin-left: 2px; }
.ox-rx:not(:disabled):hover { transform: translateY(-2px); border-color: #FDE68A; }
.ox-rx.on { background: linear-gradient(180deg, #FEF08A, #EAB308); color: #3A2A00; border-color: #1E1A24; box-shadow: 0 3px 0 #854D0E; }
.ox-rx.on b { color: #3A2A00; }
.ox-rx:disabled { cursor: default; opacity: .9; }
.ox-react-note { margin: 6px 0 0; min-height: 16px; font: 700 12px Nunito, system-ui, sans-serif; color: #CBD5E1; }
.ox-react-mini { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: 4px; }
.ox-rev-thanks.bad { color: #FCA5A5; }

/* Kartu Hadiah Pembangun di Bentengku */
.ox-bld { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border-color: #1E1A24; background: linear-gradient(90deg, rgba(14,165,233,.22), rgba(8,12,28,.74) 70%); }
.ox-bld[hidden] { display: none; }
.ox-bld-ic { font-size: 28px; }
.ox-bld-tx { display: flex; flex-direction: column; flex: 1 1 220px; min-width: 0; }
.ox-bld-tx b { font: 400 15px Bungee, Impact, sans-serif; color: #FEF3C7; }
.ox-bld-tx small { font: 700 11.5px/1.35 Nunito, system-ui, sans-serif; color: #BAE6FD; }
.ox-bld-n { display: flex; flex-direction: column; align-items: center; padding: 4px 12px; border-radius: 12px; background: rgba(255,255,255,.08); border: 2px solid rgba(255,255,255,.14); }
.ox-bld-n b { font: 400 18px Bungee, Impact, sans-serif; color: #FDE68A; }
.ox-bld-n small { font: 800 10px Nunito, system-ui, sans-serif; color: #CBD5E1; }

@media (max-height: 520px) {
  .nv-wrap { gap: 7px; }
  .nv-row, .nv-bonus { padding: 6px 10px; border-radius: 14px; }
  .nv-ic { width: 32px; height: 32px; font-size: 18px; }
  .nv-t b { font-size: 13px; }
  .nv-btn { padding: 4px 11px; font-size: 12px; }
  .ox-rx { padding: 5px 10px; font-size: 12px; }
  .ox-bld { padding: 7px 12px; }
}
@media (prefers-reduced-motion: reduce) { .mn-novchip.hot { animation: none !important; } }