/* ============================================================
   LADANG TEPI PANTAI — TEMA "COZY FARM" v5
   Lapisan tema di atas style.css. Mengubah HUD gelap menjadi
   panel krem + tombol hijau chunky khas game ladang mobile.
   Tidak ada aset gambar baru — semuanya CSS murni.
   ============================================================ */

:root {
  --cz-cream:        #FFF4DE;
  --cz-cream-2:      #FDE9C6;
  --cz-cream-deep:   #F3D7A6;
  --cz-tan:          #D9A961;
  --cz-tan-deep:     #B9822F;
  --cz-brown:        #6B4A2B;
  --cz-brown-soft:   #8A6A45;
  --cz-green:        #7CC142;
  --cz-green-deep:   #55912C;
  --cz-green-dark:   #3F7220;
  --cz-blue:         #4FB6E8;
  --cz-blue-deep:    #2A87B8;
  --cz-red:          #E5695D;
  --cz-red-deep:     #B93E33;
  --cz-gold:         #FFC93C;
  --cz-gold-deep:    #D99A16;
  --cz-gem:          #56C7F5;
  --cz-panel-radius: 18px;
}

/* Tombol "chunky" — punya bayangan bawah tebal, tenggelam saat ditekan */
.cz-chunky {
  border-style: solid;
  border-width: 2px;
  transition: transform .07s ease, box-shadow .07s ease, filter .12s ease;
}
.cz-chunky:active:not(:disabled) {
  transform: translateY(3px) !important;
  box-shadow: none !important;
}

/* ============================================================
   TOP BAR — jadi transparan, isinya kartu-kartu melayang
   ============================================================ */
#top-bar {
  background: transparent !important;
  border-bottom: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 8px 10px !important;
  padding-top: calc(8px + env(safe-area-inset-top, 0px)) !important;
  gap: 6px !important;
  row-gap: 6px !important;
  /* Penting: biarkan melipat ke baris baru supaya kartu tidak terpotong */
  flex-wrap: wrap !important;
  overflow: visible !important;
  align-items: flex-start !important;
  pointer-events: none;
}
#top-bar > * { pointer-events: auto; }

/* Baris 1: kartu petani (kiri) + mata uang (kanan)
   Baris 2: level, energi, jam, tombol.
   display:contents membuat tiap pil bisa diatur & melipat sendiri-sendiri. */
#farm-info  { flex: 0 1 auto !important; min-width: 0; order: 1; }
#resources  { display: contents !important; }
#coin-display    { order: 2; margin-left: auto !important; }
#tc-display      { order: 3; }
#level-area      { order: 4; }
#energy-display  { order: 5; }
#stamina-display { order: 6; }
#time-area       { order: 7; }
#market-event-ticker { order: 8; }
#btn-fullscreen-hud  { order: 9; }
#hud-settings        { order: 10; }

/* Tombol "Instal" bawaan PWA menabrak bar alat di kanan.
   Dipindah ke kiri bawah, tepat di atas bar menu — area itu kosong
   di semua ukuran layar, jadi tidak menutupi apa pun. */
.pwa-install-trigger[data-position="top-right"],
.pwa-install-trigger[data-position="bottom-left"],
.pwa-install-trigger[data-position="bottom-center"] {
  top: auto !important;
  right: auto !important;
  left: calc(12px + env(safe-area-inset-left, 0px)) !important;
  bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  transform: none !important;
  transform-origin: bottom left;
  scale: .9;
  opacity: .94;
  z-index: 199 !important;   /* di bawah panel (500) supaya tidak menghalangi */
}
.pwa-install-trigger:active { scale: .86; }

/* --- Kartu petani (avatar + nama ladang) --- */
#farm-info {
  background: var(--cz-cream);
  border: 3px solid var(--cz-tan);
  border-radius: 999px;
  padding: 3px 12px 3px 3px !important;
  gap: 7px !important;
  box-shadow: 0 3px 0 var(--cz-tan-deep), 0 5px 12px rgba(0,0,0,.28);
}
.avatar-disp {
  background: var(--cz-green) !important;
  border: 3px solid #fff !important;
  box-shadow: 0 0 0 2px var(--cz-green-deep);
  width: 34px; height: 34px; min-width: 34px;
  font-size: 1.25rem !important;
}
.avatar-disp:hover { border-color: #fff !important; filter: brightness(1.08); }
#farm-name-display { color: var(--cz-brown) !important; font-weight: 800 !important; }
#day-display       { color: var(--cz-green-deep) !important; font-weight: 800 !important; }
#season-display    { color: var(--cz-brown-soft) !important; font-weight: 700; }

/* --- Pil mata uang: krem + angka tebal + aksen warna --- */
.resource-item {
  background: var(--cz-cream) !important;
  border: 3px solid var(--cz-tan) !important;
  border-radius: 999px !important;
  padding: 3px 11px !important;
  color: var(--cz-brown) !important;
  font-weight: 800 !important;
  box-shadow: 0 3px 0 var(--cz-tan-deep), 0 4px 10px rgba(0,0,0,.22);
}
.coin-res { color: var(--cz-gold-deep) !important; }
.tc-res   { color: var(--cz-blue-deep) !important; }
#energy-display  { color: var(--cz-green-deep) !important; }
#stamina-display { color: var(--cz-brown-soft) !important; }

/* --- Level: lencana bulat + bar XP hijau --- */
#level-area {
  background: var(--cz-cream);
  border: 3px solid var(--cz-tan);
  border-radius: 999px;
  padding: 3px 11px 3px 4px;
  gap: 7px !important;
  box-shadow: 0 3px 0 var(--cz-tan-deep), 0 4px 10px rgba(0,0,0,.22);
}
#level-badge {
  background: linear-gradient(180deg, var(--cz-green) 0%, var(--cz-green-deep) 100%) !important;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px var(--cz-green-dark) !important;
  border-radius: 999px !important;
  min-width: 30px; text-align: center;
  font-weight: 900 !important;
}
#xp-bar-wrap {
  background: #E4CFA6 !important;
  border: 2px solid var(--cz-tan-deep);
  height: 11px !important; width: 72px !important;
  border-radius: 999px !important;
}
#xp-bar { background: linear-gradient(180deg, #A8E063, var(--cz-green-deep)) !important; }

/* Bar XP tetap tampil di layar HP (bawaan style.css menyembunyikannya) */
#xp-bar-wrap.hide-sm { display: block !important; }
@media (max-width: 599px) {
  #xp-bar-wrap { width: 54px !important; }
}
/* Nama ladang jangan cepat terpotong */
#farm-name-display { max-width: 112px !important; }
@media (max-width: 480px) {
  #farm-name-display { max-width: 84px !important; }
}
@media (max-width: 380px) {
  #xp-bar-wrap { width: 44px !important; }
}
/* style.css menyembunyikan nama ladang di layar ≤360px;
   tata letak baru sudah melipat jadi masih muat — tampilkan lagi. */
@media (max-width: 360px) {
  #farm-name-display { display: inline !important; max-width: 56px !important; }
}

/* --- Jam --- */
#time-area {
  background: var(--cz-cream);
  border: 3px solid var(--cz-tan);
  border-radius: 999px;
  padding: 3px 10px;
  box-shadow: 0 3px 0 var(--cz-tan-deep), 0 4px 10px rgba(0,0,0,.22);
}
#clock-display { color: var(--cz-brown) !important; font-weight: 800 !important; }
#time-bar-wrap { background: #E4CFA6 !important; height: 6px !important; border-radius: 999px !important; }
#time-bar { background: linear-gradient(180deg, #8FD8F7, var(--cz-blue-deep)) !important; }

/* --- Tombol ikon kecil (gear / fullscreen) --- */
.icon-btn {
  background: var(--cz-cream) !important;
  border: 3px solid var(--cz-tan) !important;
  border-radius: 12px !important;
  color: var(--cz-brown) !important;
  box-shadow: 0 3px 0 var(--cz-tan-deep);
  transition: transform .07s ease, box-shadow .07s ease;
}
.icon-btn:hover { background: #FFF9EC !important; }
.icon-btn:active { transform: translateY(3px); box-shadow: none; }

/* ============================================================
   BOTTOM BAR — papan krem dengan tombol chunky
   ============================================================ */
#bottom-bar {
  background: linear-gradient(180deg, var(--cz-cream) 0%, var(--cz-cream-2) 100%) !important;
  border-top: 4px solid var(--cz-tan) !important;
  padding: 7px 8px !important;
  padding-bottom: calc(7px + env(safe-area-inset-bottom, 0px)) !important;
  gap: 5px !important;
  box-shadow: 0 -4px 16px rgba(0,0,0,.28);
}
.hud-btn {
  background: #FFFDF6 !important;
  border: 2.5px solid var(--cz-tan) !important;
  border-radius: 14px !important;
  box-shadow: 0 3px 0 var(--cz-tan-deep);
  padding: 6px 7px !important;
  transition: transform .07s ease, box-shadow .07s ease, background .12s ease;
}
.hud-btn:hover { background: #FFF6E0 !important; transform: none !important; }
.hud-btn:active {
  background: #FFF0D4 !important;
  transform: translateY(3px) !important;
  box-shadow: none !important;
}
.hud-label { color: var(--cz-brown) !important; font-weight: 800 !important; }
.badge {
  background: var(--cz-red) !important;
  border: 2px solid #fff !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
  font-weight: 900 !important;
}

/* ============================================================
   TOOL BAR — panel krem vertikal di kanan
   ============================================================ */
#tool-bar {
  background: linear-gradient(180deg, var(--cz-cream) 0%, var(--cz-cream-2) 100%) !important;
  border: 3px solid var(--cz-tan) !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 0 var(--cz-tan-deep), 0 6px 18px rgba(0,0,0,.3);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 9px 7px !important;
}
.tool-label { color: var(--cz-brown-soft) !important; font-weight: 900 !important; }
.tool-btn {
  background: #FFFDF6 !important;
  border: 2.5px solid var(--cz-tan) !important;
  border-radius: 13px !important;
  box-shadow: 0 3px 0 var(--cz-tan-deep);
  transition: transform .07s ease, box-shadow .07s ease, background .12s ease;
}
.tool-btn:hover { background: #FFF6E0 !important; border-color: var(--cz-tan) !important; }
.tool-btn:active { transform: translateY(3px); box-shadow: none; }
.tool-btn.active {
  background: linear-gradient(180deg, #A8E063 0%, var(--cz-green) 100%) !important;
  border-color: var(--cz-green-dark) !important;
  box-shadow: 0 3px 0 var(--cz-green-dark) !important;
}

/* ============================================================
   PANEL — kartu krem besar dengan bingkai tan tebal
   ============================================================ */
#panel-overlay { background: rgba(40,26,10,.55) !important; }
#active-panel {
  background: linear-gradient(180deg, var(--cz-cream) 0%, var(--cz-cream-2) 100%) !important;
  border: 4px solid var(--cz-tan) !important;
  border-bottom: none !important;
  border-radius: 24px 24px 0 0 !important;
  box-shadow: 0 -8px 32px rgba(0,0,0,.45);
}
#panel-header {
  border-bottom: 3px solid var(--cz-cream-deep) !important;
  background: transparent;
}
#panel-title { color: var(--cz-brown) !important; font-weight: 900 !important; }
.btn-close {
  background: var(--cz-red) !important;
  border: 2.5px solid #fff !important;
  border-radius: 12px !important;
  color: #fff !important;
  font-weight: 900;
  box-shadow: 0 3px 0 var(--cz-red-deep);
  transition: transform .07s ease, box-shadow .07s ease;
}
.btn-close:hover { background: #EF7C71 !important; color: #fff !important; }
.btn-close:active { transform: translateY(3px); box-shadow: none; }

.panel-currency-row {
  background: #FFFDF6 !important;
  border: 2.5px solid var(--cz-cream-deep) !important;
  border-radius: 14px !important;
}
.cur-koin { color: var(--cz-gold-deep) !important; }
.cur-tc   { color: var(--cz-blue-deep) !important; }
.section-title { color: var(--cz-brown) !important; }
.no-items, .inv-empty { color: var(--cz-brown-soft) !important; }

/* --- Tab kategori (ALL / CROP / GOOD / RESOURCE di referensi) --- */
.shop-tab {
  background: #FFFDF6 !important;
  border: 2.5px solid var(--cz-tan) !important;
  color: var(--cz-brown) !important;
  font-weight: 800 !important;
  border-radius: 999px !important;
  box-shadow: 0 2.5px 0 var(--cz-tan-deep);
  transition: transform .07s ease, box-shadow .07s ease;
}
.shop-tab:active { transform: translateY(2.5px); box-shadow: none; }
.shop-tab.active {
  background: linear-gradient(180deg, #A8E063 0%, var(--cz-green) 100%) !important;
  border-color: var(--cz-green-dark) !important;
  color: #fff !important;
  box-shadow: 0 2.5px 0 var(--cz-green-dark) !important;
}

/* --- Kartu barang toko --- */
.shop-item {
  background: #FFFDF6 !important;
  border: 3px solid var(--cz-cream-deep) !important;
  border-radius: 16px !important;
  box-shadow: 0 3px 0 rgba(185,130,47,.35);
}
.shop-item:hover { background: #FFF8E8 !important; }
.shop-item.premium-item {
  border-color: var(--cz-gold) !important;
  background: #FFFAEA !important;
}
.shop-item-name { color: var(--cz-brown) !important; font-weight: 800 !important; }
.shop-item-desc, .shop-item-meta { color: var(--cz-brown-soft) !important; }
.shop-item-meta2 { color: var(--cz-blue-deep) !important; }
.shop-item-buff  { color: var(--cz-blue-deep) !important; }
.shop-item-price { color: var(--cz-gold-deep) !important; font-weight: 900 !important; }
.shop-item-price.tc-price { color: var(--cz-blue-deep) !important; }
.shop-item-price.unmet, .shop-item-unlock { color: var(--cz-red-deep) !important; }

/* --- Tombol beli / aksi hijau chunky (gaya "Do" & "Collect") --- */
.shop-buy-btn, .order-complete-btn.ready {
  background: linear-gradient(180deg, #A8E063 0%, var(--cz-green) 100%) !important;
  border: 2.5px solid var(--cz-green-dark) !important;
  border-radius: 12px !important;
  color: #fff !important;
  font-weight: 900 !important;
  box-shadow: 0 3px 0 var(--cz-green-dark) !important;
  transition: transform .07s ease, box-shadow .07s ease;
}
.shop-buy-btn:hover:not(:disabled) { filter: brightness(1.05); transform: none !important; }
.shop-buy-btn:active:not(:disabled),
.order-complete-btn.ready:active:not(:disabled) {
  transform: translateY(3px) !important;
  box-shadow: none !important;
}
.shop-buy-btn.tc-btn {
  background: linear-gradient(180deg, #7FD8F8 0%, var(--cz-blue) 100%) !important;
  border-color: var(--cz-blue-deep) !important;
  box-shadow: 0 3px 0 var(--cz-blue-deep) !important;
}
.shop-buy-btn:disabled, .shop-buy-btn.disabled {
  background: #E8DCC3 !important;
  border-color: #C9B590 !important;
  color: #A38F6E !important;
  box-shadow: 0 3px 0 #C9B590 !important;
}

/* --- Slot inventaris --- */
.inv-slot {
  background: #FFFDF6 !important;
  border: 3px solid var(--cz-cream-deep) !important;
  border-radius: 14px !important;
  box-shadow: 0 3px 0 rgba(185,130,47,.3);
}
.inv-slot:hover {
  background: #FFF8E8 !important;
  border-color: var(--cz-tan) !important;
  transform: translateY(-2px) !important;
}
.item-name { color: var(--cz-brown-soft) !important; }
.item-qty  { color: var(--cz-brown) !important; font-weight: 900 !important; }
.item-price { color: var(--cz-gold-deep) !important; }
.inv-category-label { color: var(--cz-brown) !important; }
.inv-barn-info { color: var(--cz-brown) !important; }
.inv-capacity span { color: var(--cz-brown-soft) !important; }
.inv-cap-bar-wrap {
  background: #E4CFA6 !important;
  border: 2px solid var(--cz-tan-deep);
  height: 12px !important;
  border-radius: 999px !important;
}
.inv-cap-bar { border-radius: 999px !important; }

/* --- Kartu pesanan (gaya papan "Order" di referensi) --- */
.order-card {
  background: #FFFDF6 !important;
  border: 3px solid var(--cz-cream-deep) !important;
  border-radius: 16px !important;
  box-shadow: 0 3px 0 rgba(185,130,47,.35);
}
.order-name   { color: var(--cz-brown) !important; font-weight: 900 !important; }
.order-reward { color: var(--cz-green-deep) !important; font-weight: 800 !important; }
.order-item.met   { background: #DFF3C8 !important; color: var(--cz-green-dark) !important; font-weight: 800; }
.order-item.unmet { background: #FBDDD9 !important; color: var(--cz-red-deep) !important; font-weight: 800; }
.order-complete-btn {
  background: #E8DCC3 !important;
  border: 2.5px solid #C9B590 !important;
  border-radius: 12px !important;
  color: #A38F6E !important;
  font-weight: 900 !important;
  box-shadow: 0 3px 0 #C9B590;
}
.order-done { color: var(--cz-green-deep) !important; font-weight: 800; }
.orders-tip {
  background: #EAF6DC !important;
  color: var(--cz-green-dark) !important;
  border: 2px solid #CDE8AC;
  border-radius: 12px !important;
  font-weight: 700;
}

/* --- Pemilih benih --- */
#seed-selector {
  background: linear-gradient(180deg, var(--cz-cream) 0%, var(--cz-cream-2) 100%) !important;
  border: 3px solid var(--cz-tan) !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 0 var(--cz-tan-deep), 0 6px 18px rgba(0,0,0,.3);
}
#seed-selector .panel-title { color: var(--cz-brown) !important; font-weight: 900; }
.seed-option {
  background: #FFFDF6 !important;
  border: 2.5px solid var(--cz-cream-deep) !important;
  border-radius: 12px !important;
  color: var(--cz-brown) !important;
  font-weight: 700;
}
.seed-option:hover { background: #FFF6E0 !important; border-color: var(--cz-tan) !important; }
.seed-option.active {
  background: linear-gradient(180deg, #DFF3C8, #C6E8A0) !important;
  border-color: var(--cz-green-deep) !important;
  color: var(--cz-green-dark) !important;
}
.seed-option span { color: var(--cz-brown-soft) !important; }

/* --- Menu aksi petak / bangunan --- */
.tile-action-menu, .building-action-menu, .seed-quick-select {
  background: linear-gradient(180deg, var(--cz-cream) 0%, var(--cz-cream-2) 100%) !important;
  border: 3px solid var(--cz-tan) !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 0 var(--cz-tan-deep), 0 6px 16px rgba(0,0,0,.3);
}

/* ============================================================
   HADIAH HARIAN / LEVEL UP / TUTORIAL
   ============================================================ */
.reward-content, #level-up-screen .lu-content, .tut-box {
  background: linear-gradient(180deg, var(--cz-cream) 0%, var(--cz-cream-2) 100%) !important;
  border: 4px solid var(--cz-tan) !important;
  border-radius: 22px !important;
  box-shadow: 0 6px 0 var(--cz-tan-deep), 0 10px 28px rgba(0,0,0,.4);
}
.reward-content h3, .tut-box h3, .tut-title { color: var(--cz-brown) !important; }
.reward-content p, .tut-box p, .tut-text { color: var(--cz-brown-soft) !important; }
.btn-menu.btn-primary {
  background: linear-gradient(180deg, #A8E063 0%, var(--cz-green) 100%) !important;
  border: 2.5px solid var(--cz-green-dark) !important;
  color: #fff !important;
  font-weight: 900 !important;
  box-shadow: 0 4px 0 var(--cz-green-dark) !important;
  transition: transform .07s ease, box-shadow .07s ease;
}
.btn-menu.btn-primary:active { transform: translateY(4px); box-shadow: none !important; }
.btn-tut-next {
  background: linear-gradient(180deg, #A8E063 0%, var(--cz-green) 100%) !important;
  border: 2.5px solid var(--cz-green-dark) !important;
  color: #fff !important; font-weight: 900 !important;
  box-shadow: 0 3px 0 var(--cz-green-dark) !important;
}
.btn-tut-skip {
  background: #FFFDF6 !important;
  border: 2.5px solid var(--cz-tan) !important;
  color: var(--cz-brown) !important; font-weight: 800 !important;
  box-shadow: 0 3px 0 var(--cz-tan-deep) !important;
}

/* ============================================================
   NOTIFIKASI — pita krem dengan garis tepi tan
   ============================================================ */
.notification, .modal-toast {
  background: var(--cz-cream) !important;
  border: 3px solid var(--cz-tan) !important;
  border-radius: 999px !important;
  color: var(--cz-brown) !important;
  font-weight: 800 !important;
  box-shadow: 0 3px 0 var(--cz-tan-deep), 0 5px 14px rgba(0,0,0,.25);
}
.notification.success { border-color: var(--cz-green-deep) !important; box-shadow: 0 3px 0 var(--cz-green-dark), 0 5px 14px rgba(0,0,0,.25); }
.notification.error   { border-color: var(--cz-red-deep) !important;   box-shadow: 0 3px 0 var(--cz-red-deep), 0 5px 14px rgba(0,0,0,.25); }
.notification.warn    { border-color: var(--cz-gold-deep) !important;  box-shadow: 0 3px 0 var(--cz-gold-deep), 0 5px 14px rgba(0,0,0,.25); }

/* ============================================================
   MENU UTAMA — biar seragam dengan tema krem
   ============================================================ */
.mm-card {
  background: linear-gradient(180deg, var(--cz-cream) 0%, var(--cz-cream-2) 100%) !important;
  border: 4px solid var(--cz-tan) !important;
  border-radius: 26px !important;
  box-shadow: 0 8px 0 var(--cz-tan-deep), 0 14px 34px rgba(0,0,0,.45) !important;
}
.mm-title-main {
  background: linear-gradient(180deg, #7BBE38 0%, #4C8A22 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.mm-title-sub-text { color: var(--cz-brown-soft) !important; letter-spacing: .28em; }
.mm-tagline { color: var(--cz-brown-soft) !important; }
.mm-btn {
  border-radius: 16px !important;
  font-weight: 900 !important;
  transition: transform .07s ease, box-shadow .07s ease;
}
.mm-btn:active { transform: translateY(4px) !important; box-shadow: none !important; }
.mm-btn-new {
  background: linear-gradient(180deg, #A8E063 0%, var(--cz-green) 100%) !important;
  border: 3px solid var(--cz-green-dark) !important;
  color: #fff !important;
  box-shadow: 0 5px 0 var(--cz-green-dark) !important;
}
.mm-btn-load {
  background: linear-gradient(180deg, #7FD8F8 0%, var(--cz-blue) 100%) !important;
  border: 3px solid var(--cz-blue-deep) !important;
  color: #fff !important;
  box-shadow: 0 5px 0 var(--cz-blue-deep) !important;
}
.mm-btn-settings {
  background: #FFFDF6 !important;
  border: 3px solid var(--cz-tan) !important;
  color: var(--cz-brown) !important;
  box-shadow: 0 5px 0 var(--cz-tan-deep) !important;
}
.mm-badge {
  background: #FFFDF6 !important;
  border: 2px solid var(--cz-tan) !important;
  color: var(--cz-brown) !important;
  font-weight: 800 !important;
}
.mm-version { color: var(--cz-brown-soft) !important; }
.mm-fs-btn {
  background: #FFFDF6 !important;
  border: 2.5px solid var(--cz-tan) !important;
  color: var(--cz-brown) !important;
  box-shadow: 0 3px 0 var(--cz-tan-deep);
}
#loading-screen .loading-bar-wrap { border: 2px solid var(--cz-tan-deep); background: #E4CFA6; }
#loading-screen .loading-bar { background: linear-gradient(180deg, #A8E063, var(--cz-green-deep)) !important; }

/* --- Layar penamaan ladang --- */
#name-screen .name-card, #name-screen > div {
  color: var(--cz-brown);
}
#name-screen h2 { color: var(--cz-brown) !important; }
.avatar-option {
  background: #FFFDF6 !important;
  border: 2.5px solid var(--cz-cream-deep) !important;
  border-radius: 14px !important;
  color: var(--cz-brown) !important;
}
.avatar-option:hover { background: #FFF6E0 !important; border-color: var(--cz-tan) !important; }
.avatar-option.selected {
  background: linear-gradient(180deg, #DFF3C8, #C6E8A0) !important;
  border-color: var(--cz-green-deep) !important;
  box-shadow: 0 0 0 2px rgba(85,145,44,.25) !important;
}

/* ============================================================
   LANGIT MENU — cerah siang hari + bukit hijau (gaya referensi)
   ============================================================ */
.sky-grad {
  background: linear-gradient(180deg,
    #4FB6E8 0%, #6CC6EE 14%, #8FD6F2 30%,
    #B4E4F6 46%, #D8F1F7 58%,
    #CFE9A8 63%, #A6D46C 72%,
    #86C24A 84%, #6BAA38 100%) !important;
  animation: cz-sky-day 90s ease-in-out infinite alternate !important;
}
@keyframes cz-sky-day {
  0%   { filter: brightness(1.00) saturate(1.02); }
  50%  { filter: brightness(1.08) saturate(1.10); }
  100% { filter: brightness(0.96) saturate(1.00); }
}
/* Matahari lebih hangat, bintang & bulan disembunyikan saat siang */
.sky-sun { opacity: .95; }
.sky-star, .sky-moon { display: none !important; }
.sky-mist {
  background: linear-gradient(180deg, rgba(255,255,255,0) 55%, rgba(255,255,255,.35) 100%) !important;
}

/* Kanvas game menutupi lapisan langit (z-index 10 vs 1) sehingga menu
   tampak gelap. Dibuat transparan — saat bermain, renderer tetap mengecat
   seluruh layar tiap frame, jadi tampilan permainan tidak berubah. */
#game-canvas { background: transparent !important; }

/* Vignette bawaan terlalu gelap untuk langit siang — dilembutkan jadi
   kehangatan tipis supaya birunya tetap cerah. */
#main-menu::before {
  background:
    linear-gradient(180deg, rgba(255,240,200,.05), rgba(120,90,40,.07)),
    radial-gradient(circle at center, transparent 45%, rgba(90,70,35,.13) 100%) !important;
}

/* ============================================================
   RESPONSIF — rapatkan bingkai di layar kecil
   ============================================================ */
@media (max-width: 480px) {
  #farm-info, .resource-item, #level-area, #time-area { border-width: 2.5px !important; }
  .hud-btn, .tool-btn { border-width: 2px !important; box-shadow: 0 2.5px 0 var(--cz-tan-deep); }
  #active-panel { border-width: 3px !important; }
  #xp-bar-wrap { width: 56px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .cz-chunky, .hud-btn, .tool-btn, .icon-btn, .shop-buy-btn, .mm-btn, .btn-close { transition: none !important; }
}
/* ============================================================
   KETERBACAAN PANEL — dibuat otomatis dari audit style.css.
   Panel kini berlatar krem, jadi teks pucat bawaan (dirancang
   untuk latar gelap) dipetakan ke warna gelap yang sepadan.
   ============================================================ */
#panel-body .avatar-option,
#panel-body .seed-option,
#panel-body .bupg-card-name,
#panel-body .bupg-card-desc,
#panel-body .bupg-cost-title,
#panel-body .bupg-row,
#panel-body .bupg-row.row-curr,
#panel-body .sq-name,
#panel-body .shop-tab,
#panel-body .shop-item-name,
#panel-body .shop-item-desc,
#panel-body .shop-item-meta,
#panel-body .inv-capacity span,
#panel-body .item-name,
#panel-body .market-tab,
#panel-body .market-item-name,
#panel-body .animal-name,
#panel-body .stat-row span:first-child,
#panel-body .stat-row span:last-child,
#panel-body .animal-growth-label,
#panel-body .feed-label,
#panel-body .cooking-tip,
#panel-body .cq-name,
#panel-body .cq-time,
#panel-body .recipe-time,
#panel-body .barn-cur-cap,
#panel-body .barn-upg-desc,
#panel-body .barn-upg-cost,
#panel-body .upg-desc,
#panel-body .quest-desc,
#panel-body .ach-desc,
#panel-body .notification,
#panel-body .reward-content p,
#panel-body .tutorial-box p,
#panel-body .settings-content select,
#panel-body #mobile-zoom-hint,
#panel-body #market-event-ticker,
#panel-body .meb-close,
#panel-body .mining-area-name,
#panel-body .mining-result-title,
#panel-body .smelting-name,
#panel-body .smelting-req,
#panel-body .smq-collect,
#panel-body .ship-name,
#panel-body .voyage-collect,
#panel-body .cargo-item-name,
#panel-body .cargo-selected-count,
#panel-body .land-intro,
#panel-body .area-card-name,
#panel-body .shop-rep-name,
#panel-body .psi-name,
#panel-body .pshop-info-panel ul,
#panel-body .rep-row,
#panel-body .festival-inactive h3,
#panel-body .festival-inactive p,
#panel-body .fmc-name,
#panel-body .fsi-name,
#panel-body .frc-name,
#panel-body .frc-inputs,
#panel-body .breed-type-title,
#panel-body .bac-name,
#panel-body .slot-selected,
#panel-body .tac-name,
#panel-body .npc-name,
#panel-body .npc-speech,
#panel-body .npc-item-name,
#panel-body .ach-tab:hover,
#panel-body .ach-tab.active,
#panel-body .ach-row-label,
#panel-body .ach-row-sub,
#panel-body .portrait-content {
  color: var(--cz-brown-soft) !important;
}

#panel-body #audio-unlock p,
#panel-body #clock-display,
#panel-body .bmenu-level,
#panel-body .bupg-bonus-line,
#panel-body .bupg-all-title,
#panel-body .shop-item-buff,
#panel-body .premium-info-box,
#panel-body .shop-item-meta2,
#panel-body .produce-time,
#panel-body .build-tip,
#panel-body .meb-desc,
#panel-body .sailing-hero-title,
#panel-body .ship-stats,
#panel-body .route-island-desc,
#panel-body .route-tag,
#panel-body .voyage-time,
#panel-body .cargo-summary,
#panel-body .area-card-desc,
#panel-body .shop-rep-stats,
#panel-body .fmc-count,
#panel-body .frc-desc,
#panel-body .breed-requirements span,
#panel-body .slot-label,
#panel-body .tac-stage,
#panel-body .portrait-content p {
  color: var(--cz-blue-deep) !important;
}

#panel-body #day-display,
#panel-body .seed-option.active,
#panel-body .bupg-mat.have,
#panel-body .bupg-row.row-done,
#panel-body .sq-title,
#panel-body .shop-tab.active,
#panel-body .order-reward,
#panel-body .order-item.met,
#panel-body .order-done,
#panel-body .market-tab.active,
#panel-body .cq-ready,
#panel-body .recipe-sell,
#panel-body .recipe-ing.met,
#panel-body .upg-maxed,
#panel-body .quest-reward,
#panel-body .area-bonus-tag,
#panel-body .plc-price,
#panel-body .bac-stats.ready,
#panel-body .tac-price,
#panel-body .npc-item-qty,
#panel-body .npc-offer-total {
  color: var(--cz-green-dark) !important;
}

#panel-body #seed-selector .panel-title,
#panel-body .bm-max,
#panel-body .bupg-currency,
#panel-body .bupg-step.current .bupg-step-label,
#panel-body .bupg-cost-coin.ok,
#panel-body .bupg-cost-coin.err,
#panel-body .bupg-mat.need,
#panel-body .bupg-max-msg,
#panel-body .sq-qty,
#panel-body .sq-cancel:hover, #panel-body .sq-cancel:active,
#panel-body .section-title,
#panel-body .inv-barn-info,
#panel-body .inv-category-label,
#panel-body .order-name,
#panel-body .order-item.unmet,
#panel-body .price-category-label,
#panel-body .animal-growth-pct,
#panel-body .recipe-name,
#panel-body .recipe-ing.unmet,
#panel-body .barn-cur-name,
#panel-body .barn-upg-name,
#panel-body .upg-name,
#panel-body .star-filled,
#panel-body .quest-name,
#panel-body .ach-name,
#panel-body .reward-content h3,
#panel-body .reward-items span,
#panel-body .level-up-content h2,
#panel-body .lu-level,
#panel-body .tutorial-box h3,
#panel-body .settings-content h2,
#panel-body .avatar-modal h3,
#panel-body .stamina-res,
#panel-body .stamina-res .res-icon,
#panel-body .meb-title,
#panel-body .stamina-label,
#panel-body .route-island-name,
#panel-body .voyage-title,
#panel-body .cargo-item-qty,
#panel-body .area-cost,
#panel-body .cur-level,
#panel-body .rep-row.current,
#panel-body .fmc-reward,
#panel-body .fest-token-info,
#panel-body .fsi-cost,
#panel-body .frc-meta,
#panel-body .bac-stats.not-ready,
#panel-body .bac-special,
#panel-body .tac-special,
#panel-body .barter-item-title,
#panel-body .npc-offer-price,
#panel-body .ach-row-val,
#panel-body .portrait-content strong {
  color: var(--cz-gold-deep) !important;
}

#panel-body .orders-tip,
#panel-body .animal-buff-note,
#panel-body .bac-pregnant,
#panel-body .breed-section-title {
  color: #6D4AA8 !important;
}

/* ============================================================
   PANEL — TATA LETAK & SCROLL
   ============================================================ */

/* Daftar peningkatan: satu kolom di HP, bertambah di layar lebar */
.upg-list { display: grid; grid-template-columns: 1fr; gap: 10px; }

/* Di layar lebar, panel jangan jadi kolom sempit yang panjang.
   Dilebarkan dan dijadikan kartu mengambang, bukan sheet bawah. */
@media (min-width: 760px) {
  #panel-overlay { align-items: center !important; }
  #active-panel {
    max-width: 900px !important;
    max-height: 86vh !important;
    border-radius: 24px !important;
    border-bottom: 4px solid var(--cz-tan) !important;
  }
  /* Daftar kartu jadi dua kolom supaya tidak perlu scroll sejauh itu */
  .upg-list, .quest-list, .ach-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .upg-card, .order-card { margin-bottom: 0 !important; }
  #panel-body > .order-card { }
}
@media (min-width: 1100px) {
  #active-panel { max-width: 1040px !important; }
  .upg-list, .quest-list, .ach-list { grid-template-columns: repeat(3, 1fr); }
}

/* Header panel menempel saat digulir — judul selalu terlihat */
#panel-header {
  position: sticky; top: 0; z-index: 3;
  background: linear-gradient(180deg, var(--cz-cream) 0%, var(--cz-cream) 70%, rgba(255,244,222,.92) 100%) !important;
  backdrop-filter: blur(2px);
}

/* Scrollbar bertema: batang tan di rel krem */
#panel-body {
  scrollbar-width: thin;
  scrollbar-color: var(--cz-tan) rgba(0,0,0,.06);
  scroll-behavior: smooth;
  overscroll-behavior: contain;
  padding-bottom: 20px !important;
}
#panel-body::-webkit-scrollbar { width: 10px; }
#panel-body::-webkit-scrollbar-track {
  background: rgba(0,0,0,.06); border-radius: 999px; margin: 6px 0;
}
#panel-body::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--cz-tan) 0%, var(--cz-tan-deep) 100%);
  border-radius: 999px; border: 2px solid var(--cz-cream);
}
#panel-body::-webkit-scrollbar-thumb:hover { background: var(--cz-tan-deep); }

/* Petunjuk "masih ada isi di bawah" — bayangan lembut di tepi bawah panel */
#active-panel { position: relative; }
#active-panel::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26px;
  background: linear-gradient(180deg, rgba(253,233,198,0) 0%, rgba(253,233,198,.95) 100%);
  pointer-events: none; border-radius: 0 0 20px 20px;
}

/* ============================================================
   KARTU PENINGKATAN — perbaikan keterbacaan & tombol
   ============================================================ */
.upg-card {
  background: #FFFDF6 !important;
  border: 3px solid var(--cz-cream-deep) !important;
  border-radius: 16px !important;
  box-shadow: 0 3px 0 rgba(185,130,47,.3);
  padding: 12px !important;
  display: flex; flex-direction: column;
}
.upg-card > .upg-btn, .upg-card > .upg-maxed { margin-top: auto; }
#panel-body .upg-name { color: var(--cz-brown) !important; font-weight: 800 !important; font-size: .88rem !important; }
#panel-body .upg-desc { color: var(--cz-brown-soft) !important; font-size: .74rem !important; line-height: 1.45; }
#panel-body .upg-level { color: var(--cz-brown-soft) !important; font-weight: 700; }
#panel-body .upg-maxed { color: var(--cz-green-dark) !important; font-weight: 800; }

/* Bintang: yang terisi emas pekat, yang kosong cokelat pudar (bukan abu tak terlihat) */
#panel-body .star-filled { color: #E8A317 !important; filter: none !important; }
#panel-body .star-empty  { color: #D8C39A !important; filter: none !important; }

/* Tombol upgrade: dari biru mencolok jadi hijau senada tema */
.upg-btn, .barn-upg-btn, .mine-btn, .sail-btn, .recipe-cook-btn,
.btn-bupg-upgrade, .market-sell-btn, .psi-list-btn, .breed-start-btn,
.frc-cook-btn, .npc-btn-accept, .ach-action-btn {
  background: linear-gradient(180deg, #A8E063 0%, var(--cz-green) 100%) !important;
  border: 2.5px solid var(--cz-green-dark) !important;
  border-radius: 12px !important;
  color: #fff !important;
  font-weight: 800 !important;
  box-shadow: 0 3px 0 var(--cz-green-dark) !important;
  transition: transform .07s ease, box-shadow .07s ease, filter .12s ease;
  padding: 9px !important;
}
.upg-btn:hover:not(:disabled):not(.disabled) { transform: none !important; filter: brightness(1.05); }
.upg-btn:active:not(:disabled):not(.disabled),
.barn-upg-btn:active:not(:disabled), .mine-btn:active:not(:disabled),
.sail-btn:active:not(:disabled), .recipe-cook-btn:active:not(:disabled),
.btn-bupg-upgrade:active:not(.disabled), .market-sell-btn:active:not(:disabled) {
  transform: translateY(3px) !important; box-shadow: none !important;
}
.upg-btn.disabled, .upg-btn:disabled,
.barn-upg-btn:disabled, .btn-bupg-upgrade.disabled {
  background: #E8DCC3 !important;
  border-color: #C9B590 !important;
  color: #A38F6E !important;
  box-shadow: 0 3px 0 #C9B590 !important;
}

/* Baris mata uang & spanduk "Upgrade Lumbung" di dalam panel */
#panel-body .barn-access-btn, #panel-body .bupg-currency {
  color: var(--cz-brown) !important; font-weight: 800 !important;
}
.barn-access-btn {
  background: #FFF6E0 !important;
  border: 2.5px solid var(--cz-tan) !important;
  border-radius: 14px !important;
  box-shadow: 0 3px 0 var(--cz-tan-deep);
}

/* ============================================================
   PENGENCANGAN KONTRAS — hasil pengukuran WCAG di peramban
   Warna emas/biru sebelumnya masih di bawah rasio 4.5:1 pada
   latar krem, jadi digelapkan sampai lolos.
   ============================================================ */
:root {
  --cz-gold-text: #8A6410;   /* emas gelap, lolos 4.5:1 di atas krem */
  --cz-blue-text: #1D6C96;   /* biru gelap, lolos 4.5:1 di atas krem */
}

#panel-body .cur-koin,
#panel-body .item-price,
#panel-body .order-name,
#panel-body .shop-item-price,
#panel-body .inv-category-label,
#panel-body .bupg-cost-coin.ok,
#panel-body .animal-growth-pct,
#panel-body .cargo-item-qty,
#panel-body .sq-qty,
#panel-body .ach-row-val,
#panel-body .recipe-name,
#panel-body .quest-name,
#panel-body .ach-name,
#panel-body .barn-cur-name,
#panel-body .barn-upg-name,
#panel-body .price-category-label,
#panel-body .route-island-name,
#panel-body .voyage-title,
#panel-body .rep-row.current,
#panel-body .barter-item-btn,
#panel-body .section-title {
  color: var(--cz-gold-text) !important;
}

#panel-body .cur-tc,
#panel-body .shop-item-meta2,
#panel-body .shop-item-buff,
#panel-body .bupg-bonus-line,
#panel-body .animal-buff-badge,
#panel-body .ship-stats,
#panel-body .route-island-desc,
#panel-body .sailing-hero-title,
#panel-body .bupg-all-title,
#panel-body .npc-type-badge,
#panel-body .npc-item-qty {
  color: var(--cz-blue-text) !important;
}

/* Hitungan bahan pesanan (0/2) dan tombol belum-lengkap */
#panel-body .order-item.met   { background:#D6EFBA !important; color:#2E5A18 !important; }
#panel-body .order-item.unmet { background:#F8D2CD !important; color:#8E2C22 !important; }
#panel-body .order-complete-btn {
  background:#E8DCC3 !important; border-color:#B9A176 !important; color:#6B5738 !important;
  box-shadow:0 3px 0 #B9A176 !important;
}
#panel-body .order-reward { color: var(--cz-green-dark) !important; }

/* ============================================================
   BAR MENU BAWAH — GESER HORIZONTAL YANG JELAS
   18 tombol tidak muat di satu layar. Sebelumnya bisa digeser
   tapi tanpa petunjuk apa pun, sehingga tombol terakhir terlihat
   "terpotong". Sekarang tepinya memudar, ada snap, dan ujungnya
   diberi ruang supaya tidak ada tombol yang terpangkas.
   ============================================================ */
#bottom-bar {
  /* ruang ekstra di kedua ujung: tombol pertama & terakhir tak terpangkas */
  padding-left: 14px !important;
  padding-right: 14px !important;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  /* bayangan dalam di tepi = petunjuk "masih ada lagi ke samping" */
  box-shadow:
    0 -4px 16px rgba(0,0,0,.28),
    inset 16px 0 14px -14px rgba(107,74,43,.55),
    inset -16px 0 14px -14px rgba(107,74,43,.55);
}
.hud-btn { scroll-snap-align: center; }

/* Batang geser tipis bertema di bawah bar (muncul saat digeser) */
#bottom-bar { scrollbar-width: thin; scrollbar-color: var(--cz-tan) transparent; }
#bottom-bar::-webkit-scrollbar { height: 4px; display: block; }
#bottom-bar::-webkit-scrollbar-track { background: transparent; }
#bottom-bar::-webkit-scrollbar-thumb {
  background: var(--cz-tan); border-radius: 999px;
}

/* Panah geser — hanya di layar lebar dengan penunjuk presisi (mouse).
   Di HP tidak ditampilkan karena geser dengan jari sudah alami. */
.bb-arrow {
  position: fixed; z-index: 202;
  width: 34px; height: 34px; border-radius: 999px;
  display: none; align-items: center; justify-content: center;
  background: var(--cz-cream); border: 2.5px solid var(--cz-tan);
  box-shadow: 0 3px 0 var(--cz-tan-deep);
  color: var(--cz-brown); font-family: 'Fredoka', sans-serif; font-size: 1rem;
  cursor: pointer; padding: 0; line-height: 1;
  transition: transform .07s ease, box-shadow .07s ease, opacity .18s ease;
}
.bb-arrow:active { transform: translateY(3px); box-shadow: none; }
.bb-arrow[hidden] { opacity: 0; pointer-events: none; }
@media (min-width: 760px) and (pointer: fine) {
  .bb-arrow { display: flex; }
}
.bb-arrow-left  { left: 6px; }
.bb-arrow-right { right: 6px; }

/* ============================================================
   BAR MENU BAWAH — SCROLL HORIZONTAL YANG TERLIHAT
   19 tombol hampir selalu lebih lebar dari layar HP. Sebelumnya
   scrollbar disembunyikan total sehingga tidak ada tanda kalau
   masih ada menu di kanan. Sekarang diberi scrollbar bertema,
   pudar di tepi, dan tombol panah.
   ============================================================ */

#bottom-bar {
  /* tampilkan kembali scrollbar (bawaan style.css menyembunyikannya) */
  scrollbar-width: thin !important;
  scrollbar-color: var(--cz-tan-deep) rgba(0,0,0,.08);
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding-bottom: calc(9px + env(safe-area-inset-bottom, 0px)) !important;
}
#bottom-bar::-webkit-scrollbar { display: block !important; height: 6px; }
#bottom-bar::-webkit-scrollbar-track {
  background: rgba(0,0,0,.08); border-radius: 999px; margin: 0 10px;
}
#bottom-bar::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--cz-tan) 0%, var(--cz-tan-deep) 100%);
  border-radius: 999px;
}
.hud-btn { scroll-snap-align: center; }

/* Pudar di tepi — hanya muncul ke arah yang masih bisa digeser */
#bottom-bar.can-right:not(.can-left) {
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 46px), transparent 100%);
          mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 46px), transparent 100%);
}
#bottom-bar.can-left:not(.can-right) {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 46px, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 46px, #000 100%);
}
#bottom-bar.can-left.can-right {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 46px, #000 calc(100% - 46px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 46px, #000 calc(100% - 46px), transparent 100%);
}

/* Tombol panah di kedua ujung */
.bb-arrow {
  position: fixed; z-index: 201;
  width: 30px; padding: 0;
  display: none; align-items: center; justify-content: center;
  background: linear-gradient(180deg, var(--cz-cream) 0%, var(--cz-cream-2) 100%);
  border: none;
  color: var(--cz-brown);
  font-family: 'Fredoka', sans-serif; font-size: 1.5rem; line-height: 1;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.bb-arrow.show { display: flex; }
.bb-arrow-left  { left: 0;  border-right: 2px solid var(--cz-cream-deep);  border-radius: 0 12px 12px 0; }
.bb-arrow-right { right: 0; border-left:  2px solid var(--cz-cream-deep);  border-radius: 12px 0 0 12px; }
.bb-arrow:hover  { background: var(--cz-sun, #FFB84D); color: #fff; }
.bb-arrow:active { background: var(--cz-tan); color: #fff; }

/* Panah hanya berguna dengan penunjuk; di layar sentuh sembunyikan */
@media (hover: none) {
  .bb-arrow { display: none !important; }
}

/* Di layar sangat lebar, rapatkan sedikit supaya 19 tombol muat utuh */
@media (min-width: 1200px) {
  #bottom-bar { justify-content: center; }
  .hud-btn { min-width: 62px !important; padding: 5px 5px !important; }
}

/* ============================================================
   PETUALANGAN PULAU — kartu makhluk & arena bertarung
   ============================================================ */
.cr-intro { text-align:center; margin-bottom:12px; }
.cr-intro-title { font-family:'Fredoka',sans-serif; font-size:1.05rem; color:var(--cz-brown); }
.cr-intro-sub { font-size:.74rem; color:var(--cz-brown-soft); font-weight:700; margin-top:4px; line-height:1.5; }

.cr-pick-list { display:grid; gap:10px; }
@media (min-width:760px){ .cr-pick-list { grid-template-columns:repeat(3,1fr); } }
.cr-pick {
  display:flex; align-items:center; gap:10px; text-align:left; width:100%;
  background:#FFFDF6; border:3px solid var(--cz-cream-deep); border-radius:16px;
  padding:12px; box-shadow:0 3px 0 rgba(185,130,47,.3); cursor:pointer;
  transition:transform .07s ease, box-shadow .07s ease;
}
.cr-pick:active { transform:translateY(3px); box-shadow:none; }
.cr-pick-emoji { font-size:2.1rem; flex-shrink:0; }
.cr-pick-info { flex:1; min-width:0; }
.cr-pick-name { font-family:'Fredoka',sans-serif; color:var(--cz-brown); font-size:.95rem; }
.cr-pick-type { font-size:.72rem; font-weight:800; }
.cr-pick-bonus { font-size:.68rem; color:var(--cz-green-dark); font-weight:700; margin-top:2px; }
.cr-pick-stats { font-size:.62rem; color:var(--cz-brown-soft); font-weight:700; white-space:nowrap; }

.cr-camp-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; flex-wrap:wrap; gap:6px; }
.cr-stage, .cr-energy { font-size:.78rem; font-weight:800; color:var(--cz-brown); }
.cr-bonus-box { background:#EAF6DC; border:2.5px solid #CDE8AC; border-radius:14px; padding:10px 12px; margin-bottom:12px; }
.cr-bonus-title { font-size:.76rem; font-weight:800; color:var(--cz-green-dark); margin-bottom:6px; }
.cr-bonus-chips { display:flex; flex-wrap:wrap; gap:6px; }
.cr-bonus-chip { font-size:.68rem; font-weight:800; color:#2E5A18; background:#D6EFBA; border-radius:999px; padding:3px 9px; }

.cr-team-title { font-size:.8rem; font-weight:800; color:var(--cz-brown); margin:4px 0 8px; }
.cr-team { display:grid; gap:8px; }
@media (min-width:760px){ .cr-team { grid-template-columns:1fr 1fr; } }

.cr-card {
  display:flex; align-items:center; gap:10px;
  background:#FFFDF6; border:3px solid var(--cz-cream-deep); border-radius:14px; padding:10px;
}
.cr-card.cr-active { border-color:var(--cz-green-deep); background:#F6FBEE; }
.cr-card.cr-down { opacity:.5; }
.cr-emoji { font-size:1.9rem; flex-shrink:0; }
.cr-body { flex:1; min-width:0; }
.cr-top { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.cr-name { font-family:'Fredoka',sans-serif; color:var(--cz-brown); font-size:.88rem; }
.cr-type { font-size:.62rem; font-weight:800; border-radius:999px; padding:2px 7px; }
.cr-lv { font-size:.64rem; font-weight:800; color:var(--cz-brown-soft); }
.cr-hpwrap { background:#E4CFA6; border-radius:999px; height:9px; margin-top:5px; overflow:hidden; border:1.5px solid var(--cz-tan-deep); }
.cr-hp { height:100%; border-radius:999px; transition:width .3s ease; }
.cr-hptext { font-size:.63rem; color:var(--cz-brown-soft); font-weight:700; margin-top:3px; }

.cr-actions { display:grid; gap:8px; margin-top:14px; }
@media (min-width:600px){ .cr-actions { grid-template-columns:2fr 1fr; } }
.cr-btn {
  border-radius:14px; padding:12px; font-family:'Fredoka',sans-serif; font-size:.92rem;
  cursor:pointer; border:2.5px solid; transition:transform .07s ease, box-shadow .07s ease;
}
.cr-btn:active { transform:translateY(3px); box-shadow:none !important; }
.cr-btn-main { background:linear-gradient(180deg,#A8E063,var(--cz-green)); border-color:var(--cz-green-dark); color:#fff; box-shadow:0 4px 0 var(--cz-green-dark); }
.cr-btn-rest { background:#FFFDF6; border-color:var(--cz-tan); color:var(--cz-brown); box-shadow:0 4px 0 var(--cz-tan-deep); }
.cr-hint { font-size:.7rem; color:var(--cz-brown-soft); font-weight:700; margin-top:10px; line-height:1.55; text-align:center; }

.cr-side-label { font-size:.68rem; font-weight:800; color:var(--cz-brown-soft); margin:6px 0 4px; }
.cr-vs { text-align:center; font-family:'Fredoka',sans-serif; color:var(--cz-tan-deep); font-size:.8rem; margin:8px 0 2px; }
.cr-switch { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.cr-swap {
  font-size:.68rem; font-weight:800; color:var(--cz-brown); background:#FFFDF6;
  border:2px solid var(--cz-tan); border-radius:10px; padding:5px 9px; cursor:pointer;
}
.cr-swap:disabled { opacity:.4; cursor:not-allowed; }
.cr-log {
  background:rgba(0,0,0,.05); border-radius:12px; padding:9px 11px; margin-top:10px;
  font-size:.72rem; font-weight:700; color:var(--cz-brown); min-height:34px; line-height:1.6;
}
.cr-moves { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }
.cr-move {
  background:#FFFDF6; border:2.5px solid var(--cz-cream-deep); border-radius:13px;
  padding:9px; text-align:left; cursor:pointer; box-shadow:0 3px 0 rgba(185,130,47,.28);
  transition:transform .07s ease, box-shadow .07s ease;
}
.cr-move:active { transform:translateY(3px); box-shadow:none; }
.cr-move-name { display:block; font-family:'Fredoka',sans-serif; color:var(--cz-brown); font-size:.85rem; }
.cr-move-meta { display:block; font-size:.64rem; color:var(--cz-brown-soft); font-weight:700; margin-top:2px; }