/* economy.css — Tampilan fitur ekonomi KORA RPG: identitas visual rarity (Epic/Legendary/Mythic),
   kualitas crafting, Bengkel (Racik), Toko NPC, Pasar, Barter, Panduan. Gaya semi-pixel: tepi tegas, isi datar. */

/* ===== Identitas rarity tinggi (keputusan #21 opsi b) =====
   Di grid: bingkai berwarna DIAM (puluhan kartu langka tidak bergerak bersamaan).
   Bergerak hanya pada kartu yang dipilih / disorot mouse, dan di panel detail, dengan jumlah ulang terbatas. */
.icard.r-LEGENDARY, .icard.r-MYTHIC { overflow: visible; isolation: isolate; }
.icard.r-LEGENDARY::before, .icard.r-MYTHIC::before {
  content: ''; position: absolute; inset: -2px; border-radius: 10px; z-index: -1; padding: 2px;
  background: conic-gradient(from var(--ang, 0deg), #f2cc60, #fff3c4, #d9a12a, #f2cc60);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.icard.r-MYTHIC::before { background: conic-gradient(from var(--ang, 0deg), #ff7b72, #f2cc60, #b48cff, #7ee7ff, #ff7b72); }
.icard.r-MYTHIC::after {
  content: ''; position: absolute; inset: 0; border-radius: 8px; pointer-events: none; z-index: 1;
  background-image: radial-gradient(2px 2px at 20% 30%, #fff, transparent), radial-gradient(2px 2px at 75% 20%, #ffe9a3, transparent), radial-gradient(1.5px 1.5px at 60% 80%, #ffd6ff, transparent), radial-gradient(1.5px 1.5px at 30% 70%, #bff6ff, transparent);
}
/* Total tiap gerak ≤5 detik (R-39): sekali tampil saat dipilih, lalu diam */
.icard.r-EPIC.is-sel { animation: rEpic 2.6s ease-in-out 1; }
.icard.r-LEGENDARY.is-sel::before { animation: rSpin 3.2s linear 1; }
.icard.r-MYTHIC.is-sel::before { animation: rSpin 2.2s linear 2; }
.icard.r-MYTHIC.is-sel::after { animation: rSpark 1.8s steps(2) 2; }
.icard.r-MYTHIC.is-sel .art { animation: rFloat 2.4s ease-in-out 2; }
@media (hover: hover) {
  .icard.r-LEGENDARY:hover::before { animation: rSpin 3.2s linear 1; }
  .icard.r-MYTHIC:hover::before { animation: rSpin 2.2s linear 1; }
}
@property --ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes rSpin { to { --ang: 360deg; } }
/* Epic: cincin ungu berdenyut (tanpa pendar; pendar milik Legendary/Mythic) */
@keyframes rEpic { 50% { box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(188, 140, 255, 0.55); } }
@keyframes rSpark { 50% { opacity: 0.25; transform: translateY(-2px); } }
@keyframes rFloat { 50% { transform: translateY(-3px); } }
/* Panel detail: pendar diam untuk Legendary/Mythic (fungsi hierarki), gerak 2 kali (4,8 dtk) lalu diam */
.detail-hero.r-LEGENDARY .detail-art, .detail-hero.r-MYTHIC .detail-art { box-shadow: 0 0 18px var(--rg); animation: rFloat 2.4s ease-in-out 2; }
.detail-hero.r-MYTHIC .detail-name { background: linear-gradient(90deg, #ff7b72, #f2cc60, #b48cff, #7ee7ff, #ff7b72); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: rText 3s linear 1; }
@keyframes rText { to { background-position: 200% 0; } }
@media (prefers-reduced-motion: reduce) { .icard, .icard::before, .icard::after, .icard .art, .detail-hero .detail-art, .detail-hero .detail-name { animation: none !important; } }

/* ===== Kualitas crafting ===== */
.qdot { position: absolute; top: 7px; right: 7px; width: 9px; height: 9px; border-radius: 2px; border: 1.5px solid #0e131d; z-index: 2; }
.qdot.q1 { background: #c9d1d9; } .qdot.q2 { background: #7ee787; } .qdot.q3 { background: #58a6ff; } .qdot.q4 { background: #f2cc60; }
.detail-desc { margin: 8px 0 4px; font-size: var(--fs-sm); line-height: 1.45; color: var(--text-2); }
.detail-meta { margin-top: 8px; display: grid; gap: 3px; font-size: var(--fs-sm); color: var(--text-2); }
.attr-list { margin-top: 8px; }

/* ===== Bengkel: Racik ===== */
.split.craft .craft-left { display: flex; flex-direction: column; min-height: 0; }
.skill-bars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 8px; }
.skill-pill { display: flex; gap: 6px; align-items: center; padding: 5px 7px; border-radius: 6px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); min-width: 0; }
.skill-pill .gi { width: 22px; height: 22px; flex: none; }
.skill-pill > div { min-width: 0; flex: 1; }
.skill-pill b { display: block; font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skill-pill small { display: block; font-size: var(--fs-xs); color: var(--muted); }
.skill-pill .dur-bar { height: 4px; margin-top: 2px; }
.chk { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; font-size: var(--fs-sm); font-weight: 800; color: var(--text-2); white-space: nowrap; }
.chk input { width: 18px; height: 18px; accent-color: var(--gold-2); }
body.ui-touch .chk { min-height: 44px; }
.rc-badge { display: inline-block; padding: 0 6px; border-radius: 4px; font-size: var(--fs-xs); font-weight: 900; }
.rc-badge.ok { color: #0d2a12; background: #7ee787; } .rc-badge.no { color: #ffb3ab; background: rgba(229, 83, 75, 0.18); } .rc-badge.lock { color: #c9d1d9; background: rgba(255, 255, 255, 0.08); }
.req-ic { display: inline-flex; width: 22px; height: 22px; } .req-ic .gi { width: 100%; height: 100%; }
.count-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 0 4px; font-size: var(--fs-sm); font-weight: 800; flex-wrap: wrap; }
.count-row small { color: var(--muted); font-size: var(--fs-xs); }
/* Stepper jumlah: 36px di PC, 44px di layar sentuh, jarak 6px agar jempol tidak salah tekan */
.stepper { display: inline-flex; align-items: center; gap: 6px; }
.stepper button { min-width: 36px; height: 36px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.15); border-bottom: 3px solid #0b1019; background: #1c2638; color: #fff; font-family: var(--font-ui); font-size: var(--fs-md); font-weight: 900; }
.stepper button:hover:not(:disabled) { background: #26334b; }
.stepper b { min-width: 26px; text-align: center; }
body.ui-touch .stepper button { min-width: 44px; height: 44px; }
.q-chances { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 10px 0 4px; }
.qc { display: flex; flex-direction: column; align-items: center; padding: 4px 2px; border-radius: 6px; font-size: var(--fs-xs); font-weight: 800; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); }
.qc b { font-size: var(--fs-sm); } .qc.q2 b { color: #7ee787; } .qc.q3 b { color: #58a6ff; } .qc.q4 b { color: #f2cc60; }
.craft-result { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 10px 0; padding: 8px 10px; border-radius: 6px; font-size: var(--fs-sm); font-weight: 800; border: 1.5px solid var(--rc, #3a4760); background: color-mix(in srgb, var(--rc, #3a4760) 12%, transparent); animation: bump 0.45s; }

/* ===== HUD: ramuan cepat & amunisi ===== */
#hud-quick { position: absolute; right: calc(14px + env(safe-area-inset-right)); bottom: calc(58px + env(safe-area-inset-bottom)); z-index: 6; pointer-events: auto; }
body.ui-touch #hud-quick { right: calc(112px + env(safe-area-inset-right)); bottom: calc(104px + env(safe-area-inset-bottom)); }
.hidden.ammo-pill { display: none; }
.hud-quick { display: flex; gap: 6px; align-items: center; }
.quick-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 8px; border: 2px solid rgba(255, 255, 255, 0.18); border-bottom-color: rgba(0, 0, 0, 0.6); background: rgba(14, 19, 29, 0.85); padding: 4px; }
.quick-btn .gi { width: 100%; height: 100%; }
.quick-btn .n { position: absolute; right: -5px; bottom: -5px; min-width: 20px; padding: 0 4px; border-radius: 6px; font-size: var(--fs-xs); font-weight: 900; color: #2a1a04; background: #e2b54a; border: 1.5px solid #0e131d; }
.quick-btn .cd { position: absolute; inset: 0; border-radius: 6px; background: rgba(0, 0, 0, 0.6); transform-origin: bottom; }
.quick-btn.is-empty { opacity: 0.45; }
.ammo-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 6px; font-size: var(--fs-sm); font-weight: 900; background: rgba(14, 19, 29, 0.85); border: 1.5px solid rgba(255, 255, 255, 0.15); }
.ammo-pill small { font-size: var(--fs-xs); color: var(--text-2); }
.ammo-pill .gi { width: 18px; height: 18px; }
.ammo-pill.is-low { border-color: #e5534b; color: #ffb3ab; }

@media (max-width: 760px) {
  .skill-bars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===== Toko NPC (hijau, jelas berbeda dari Pasar Pemain) ===== */
.shop-npc { display: flex; flex-direction: column; gap: 10px; min-height: 0; height: 100%; }
.ns-banner { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: space-between; align-items: center; padding: 9px 12px; border-radius: 8px; font-size: var(--fs-sm); background: rgba(126, 231, 135, 0.08); border: 1.5px solid rgba(126, 231, 135, 0.35); color: #d7f5da; }
.ns-banner b { color: #fff; }
.ns-gold { display: inline-flex; align-items: center; gap: 5px; font-weight: 900; color: var(--gold-hi); white-space: nowrap; }
.ns-gold .gi { width: 18px; height: 18px; }
.ns-refresh { white-space: nowrap; font-weight: 800; } .ns-refresh b { color: #7ee787; font-variant-numeric: tabular-nums; }
.ns-list { display: grid; gap: 8px; overflow-y: auto; min-height: 0; flex: 1; padding-right: 4px; align-content: start; }
.shop-row { position: relative; display: grid; grid-template-columns: 52px 1fr auto auto auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 8px; background: #172031; border: 1.5px solid var(--rc, #3a4760); }
.shop-row.is-sold { opacity: 0.55; }
.sr-art { width: 48px; height: 48px; } .sr-art .gi { width: 100%; height: 100%; }
.sr-info { min-width: 0; } .sr-info .nm { font-weight: 900; font-size: var(--fs-md); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.sr-info .sub { font-size: var(--fs-xs); color: var(--text-2); margin-top: 2px; }
.sr-price { display: flex; align-items: center; gap: 4px; font-size: var(--fs-md); white-space: nowrap; } .sr-price .gi { width: 18px; height: 18px; } .sr-price small { color: var(--muted); font-size: var(--fs-xs); }
/* Alasan tidak bisa beli (stok habis / batas harian), sebaris di bawah nama; Gold kurang cukup di banner */
.sr-why { display: block; margin-top: 2px; font-size: var(--fs-xs); font-weight: 800; color: #ffb3ab; }
@media (max-width: 760px), (max-height: 520px) {
  /* Area grid HANYA untuk baris Toko NPC (.sr-art/.sr-info/.sr-price juga dipakai baris Pasar & keranjang) */
  .shop-row { grid-template-columns: 40px 1fr auto; grid-template-areas: 'a i p' 'a s b'; row-gap: 6px; }
  .shop-row .sr-art { grid-area: a; width: 40px; height: 40px; } .shop-row .sr-info { grid-area: i; } .shop-row .sr-price { grid-area: p; justify-self: end; }
  .shop-row .stepper { grid-area: s; } .shop-row [data-buy] { grid-area: b; justify-self: end; }
}

/* ===== Pasar Pemain (emas) ===== */
.split.market, .split.market-sell { min-height: 0; }
.mk-left { display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.mk-select { height: 36px; border-radius: 6px; background: #121927; color: var(--text); border: 1px solid rgba(255, 255, 255, 0.14); padding: 0 8px; font-family: var(--font-ui); font-weight: 800; font-size: var(--fs-sm); }
body.ui-touch .mk-select { height: 44px; }
.mk-list { display: grid; gap: 6px; overflow-y: auto; min-height: 0; flex: 1; padding: 2px 4px 2px 2px; align-content: start; }
/* Baris listing = <button> (bisa dipilih dengan keyboard) */
.mk-row { display: grid; grid-template-columns: 44px 1fr auto auto; gap: 10px; align-items: center; width: 100%; padding: 7px 10px; border-radius: 8px; text-align: left; font-family: var(--font-ui); font-size: var(--fs-sm); color: var(--text); background: #172031; border: 1.5px solid var(--rc, #3a4760); }
button.mk-row { -webkit-appearance: none; appearance: none; cursor: pointer; }
button.mk-row:hover { background: #1d2a40; }
.mk-row.is-sel { box-shadow: 0 0 0 2px #fff; }
.mk-row .sr-art { width: 42px; height: 42px; } .mk-row .up { color: #ff8a80; }
.mk-row .sub { display: block; }
.mk-qty { font-weight: 900; font-size: var(--fs-sm); color: #ffe9a3; }
.deal { margin-left: 4px; padding: 0 5px; border-radius: 4px; font-size: var(--fs-xs); font-weight: 900; } .deal.good { background: rgba(126, 231, 135, 0.18); color: #7ee787; } .deal.bad { background: rgba(229, 83, 75, 0.18); color: #ffb3ab; }
.price-ref { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin: 10px 0; }
.price-ref > div { display: flex; flex-direction: column; align-items: center; padding: 5px 2px; border-radius: 6px; background: rgba(242, 204, 96, 0.06); border: 1px solid rgba(242, 204, 96, 0.2); }
.price-ref small { font-size: var(--fs-xs); color: var(--muted); text-align: center; } .price-ref b { font-size: var(--fs-sm); color: #ffe9a3; }
.seller-box { margin-top: 8px; padding: 6px 10px; border-radius: 6px; font-size: var(--fs-sm); background: rgba(255, 255, 255, 0.04); }
.mk-tab { overflow-y: auto; height: 100%; display: grid; gap: 6px; align-content: start; }
.mk-tab .mk-row { grid-template-columns: 44px 1fr auto auto; }
.hist-row { display: grid; grid-template-columns: 1fr auto auto auto; gap: 10px; align-items: center; padding: 6px 10px; border-radius: 6px; background: rgba(255, 255, 255, 0.03); font-size: var(--fs-sm); }
.hist-row .pos { color: #7ee787; } .hist-row .neg { color: #ffb3ab; } .hist-row small { color: var(--muted); }
@media (max-width: 760px), (max-height: 520px) {
  .price-ref { grid-template-columns: repeat(2, 1fr); }
  .mk-row { grid-template-columns: 38px 1fr auto; } .mk-row .mk-qty { display: none; }
}

/* ===== Kotak Surat & Barter ===== */
.mail-row small.ok, .att small.ok { color: #7ee787; } .mail-row small.no, .att small.no, .mail-act small.no { color: #ffb3ab; }
.icard.mail-row .barter-sum { width: 100%; }
.barter-sum { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: start; margin-top: 6px; }
.barter-sum > div { display: flex; flex-wrap: wrap; gap: 4px; align-content: flex-start; } .barter-sum small { width: 100%; font-size: var(--fs-xs); color: var(--muted); font-weight: 800; }
.barter-sum .arrow, .trade-sum .arrow { align-self: center; font-size: 1.1rem; color: #f2cc60; }
.live-card { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center; margin-top: 10px; padding: 10px 12px; border-radius: 8px; background: rgba(180, 140, 255, 0.1); border: 1.5px solid rgba(180, 140, 255, 0.4); }
.live-card span { display: inline-flex; gap: 6px; }
.live-list { display: grid; gap: 6px; } .live-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 6px; background: rgba(255, 255, 255, 0.04); }
.live-row small { color: var(--muted); }
.basket-row { display: grid; grid-template-columns: 34px 1fr auto auto; gap: 8px; align-items: center; padding: 5px 8px; margin-bottom: 5px; border-radius: 6px; background: #172031; border: 1.5px solid var(--rc, #3a4760); font-size: var(--fs-sm); }
.basket-row .sr-art { width: 32px; height: 32px; } .basket-row .nm { font-weight: 800; min-width: 0; } .basket-row .nm small { display: block; font-weight: 700; color: var(--muted); font-size: var(--fs-xs); } .basket-row .up { color: #ff8a80; }
.req-row { display: grid; grid-template-columns: 1fr 70px auto; gap: 6px; margin-bottom: 6px; }
.req-row input { height: 36px; border-radius: 6px; background: #121927; color: var(--text); border: 1px solid rgba(255, 255, 255, 0.14); padding: 0 8px; font-family: var(--font-ui); }
body.ui-touch .req-row input { height: 44px; }
.counter-banner { margin-bottom: 10px; padding: 8px 10px; border-radius: 6px; font-size: var(--fs-sm); background: rgba(180, 140, 255, 0.12); border: 1px solid rgba(180, 140, 255, 0.45); }
.empty.small { padding: 10px; font-size: var(--fs-sm); }
.trade-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; min-height: 0; flex: 1; }
.trade-col { display: flex; flex-direction: column; gap: 6px; min-height: 0; overflow-y: auto; }
.trade-col .item-grid { max-height: 190px; }
.trade-foot { margin-top: 10px; display: grid; gap: 8px; }
.trade-sum { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; padding: 8px 10px; border-radius: 6px; background: rgba(242, 204, 96, 0.06); border: 1px solid rgba(242, 204, 96, 0.25); font-size: var(--fs-sm); }
.trade-sum small { display: block; font-size: var(--fs-xs); color: var(--muted); font-weight: 800; }
.trade-status { display: flex; flex-wrap: wrap; gap: 10px; font-size: var(--fs-sm); font-weight: 800; } .trade-status .ok { color: #7ee787; } .trade-status .lock { color: #f2cc60; }
#modal-body-container .view-root:has(.trade-grid) { display: flex; flex-direction: column; }
@media (max-width: 760px) { .trade-grid { grid-template-columns: 1fr; } .barter-sum, .trade-sum { grid-template-columns: 1fr; } .barter-sum .arrow, .trade-sum .arrow { display: none; } }
/* Kotak cari di dalam kolom vertikal: jangan ikut membesar (ikon ⌕ tetap di tengah input) */
.trade-col > .search-box, .mk-left > .search-box { flex: none; max-width: none; }

/* ===== Status karakter di Tas ===== */
.stat-strip { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin: 6px 0 8px; padding: 7px 10px; border-radius: 6px; font-size: var(--fs-sm); color: var(--text-2); background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.08); }
.stat-strip b { color: var(--text); }
.stat-strip .ss-attr { padding: 0 6px; border-radius: 4px; background: rgba(180, 140, 255, 0.12); color: #d6c2ff; font-weight: 800; }

/* ===== Panduan Dungeon ===== */
.guide { overflow-y: auto; height: 100%; padding-right: 4px; }
.g-head { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.g-head h3 { margin: 0; font-size: var(--fs-lg); } .g-sub { font-size: var(--fs-sm); color: var(--muted); }
.fit { padding: 3px 10px; border-radius: 6px; font-size: var(--fs-sm); font-weight: 900; }
.fit.ok { color: #7ee787; background: rgba(126, 231, 135, 0.12); } .fit.mid { color: #ffe9a3; background: rgba(242, 204, 96, 0.12); } .fit.bad { color: #ffb3ab; background: rgba(229, 83, 75, 0.14); }
.g-list { display: grid; gap: 6px; }
.g-mon { padding: 8px 10px; border-radius: 6px; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.07); margin-bottom: 6px; }
.g-top { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 6px; font-size: var(--fs-md); }
.chip.warn { color: #ffb3ab; border-color: rgba(229, 83, 75, 0.45); }
.g-bp { margin-top: 6px; font-size: var(--fs-sm); font-weight: 800; }
.att small { margin-left: 4px; font-size: var(--fs-xs); font-weight: 900; color: var(--muted); }
.att small.ch-hi { color: #7ee787; } .att small.ch-mid { color: #e6edf3; } .att small.ch-lo { color: #ffd36b; } .att small.ch-vlo { color: #ff9b8f; }