/* Luminous: sheet/modal/tab/nút/thẻ theo design-concepts/luminous-ui-20 */

/* ========== SHEET FRAME & HEADER ========== */
.sheet {
  background: #f5ede3 !important;
  border: 4px solid #8b6f47 !important;
  box-shadow: 0 8px 24px rgba(60, 30, 10, 0.35) !important;
}

.sheet header {
  position: relative !important;
  background-image: url(../assets/lum/ui/ribbon.webp) !important;
  background-size: 100% 100% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-color: #6d2c2c !important;
  padding: 20px 14px !important;
  margin: -4px -4px 0 -4px !important;
  min-height: 70px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.sheet h2 {
  color: #fff !important;
  font-weight: 900 !important;
  font-size: 24px !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-shadow: 2px 2px 4px rgba(60, 20, 10, 0.6);
  margin: 0 !important;
  position: relative;
  z-index: 2;
}

/* Add painted icons to sheet titles */
.sheet[data-view] h2::before {
  content: '';
  display: inline-block;
  width: 32px;
  height: 32px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
  margin-right: 12px;
  filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.3));
}

.sheet[data-view="stock"] h2::before { background-image: url(../assets/lum/ui/m_home.webp); }
.sheet[data-view="book"] h2::before { background-image: url(../assets/lum/ui/m_ledger.webp); }
.sheet[data-view="story"] h2::before { background-image: url(../assets/lum/ui/m_story.webp); }
.sheet[data-view="map"] h2::before { background-image: url(../assets/lum/ui/m_careers.webp); }
.sheet[data-view="life"] h2::before { background-image: url(../assets/lum/ui/m_map.webp); }
.sheet[data-view="friends"] h2::before { background-image: url(../assets/lum/ui/m_friends.webp); }
.sheet[data-view="ranking"] h2::before { background-image: url(../assets/lum/ui/m_trophy.webp); }
.sheet[data-view="market"] h2::before { background-image: url(../assets/lum/ui/m_market.webp); }
.sheet[data-view="shop"] h2::before { background-image: url(../assets/lum/ui/m_shop.webp); }
.sheet[data-view="quests"] h2::before { background-image: url(../assets/lum/ui/m_quest.webp); }
.sheet[data-view="more"] h2::before { background-image: url(../assets/lum/ui/gear.webp); }
.sheet[data-view="energy"] h2::before { background-image: url(../assets/lum/ui/energy.webp); }
.sheet[data-view="day"] h2::before { background-image: url(../assets/lum/ui/m_calendar.webp); }
.sheet[data-view="home"] h2::before { background-image: url(../assets/lum/ui/m_wallet.webp); }
.sheet[data-view="chat"] h2::before { background-image: url(../assets/lum/ui/m_chat.webp); }

/* Close button - red round X */
.sheet header .icon-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #d94545 url(../assets/lum/ui/m_close.webp) center/contain no-repeat;
  border: none;
  box-shadow: 0 3px 8px rgba(0,0,0,0.3);
  color: transparent;
  font-size: 0;
  cursor: pointer;
  transition: transform 0.15s;
  z-index: 3;
}

.sheet header .icon-btn:hover {
  transform: translateY(-50%) scale(1.08);
}

.sheet header .icon-btn:active {
  transform: translateY(-50%) scale(0.95);
}

/* Back button if present */
.sheet header .icon-btn:first-child {
  left: 8px;
  right: auto;
  background: #7a9eb5;
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sheet-body {
  background: #f5ede3;
  padding: 12px 16px 24px !important;
}

/* ========== BACKDROP ========== */
.backdrop {
  background: rgba(74, 46, 26, 0.5) !important;
}

/* ========== MODAL ========== */
.modal-wrap {
  background: rgba(74, 46, 26, 0.55) !important;
}

.modal {
  /* khung kem viền gỗ + hoa góc (ui/panel_card); border-image giữ góc không méo */
  background: transparent !important;
  border: 4px solid transparent !important;
  border-image: url(../assets/lum/ui/panel_card.webp) 120 fill / 40px / 4px stretch !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: drop-shadow(0 8px 20px rgba(60, 30, 10, 0.4));
  padding: 26px 26px 22px !important;
  max-width: 520px;
}

.modal h3 {
  color: #5d3a1a;
  font-size: 22px !important;
  margin: 0 0 12px !important;
  font-weight: 900;
}

/* ========== BUTTONS ========== */
/* Primary yellow button - Mua/Nhận/Xác nhận */
.btn.pri, .btn.big {
  background: linear-gradient(180deg, #ffd84a 0%, #ffb820 100%);
  color: #5d3a1a !important;
  font-weight: 800;
  border: none;
  border-radius: 12px;
  box-shadow: 0 0 0 2px #cc9216, 0 4px 0 #cc9216, 0 5px 8px rgba(0,0,0,0.25);
  padding: 10px 20px;
  cursor: pointer;
  transition: transform 0.1s;
  text-transform: none;
}

.btn.pri:hover, .btn.big:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 2px #cc9216, 0 6px 0 #cc9216, 0 7px 10px rgba(0,0,0,0.3);
}

.btn.pri:active, .btn.big:active {
  transform: translateY(2px);
  box-shadow: 0 0 0 2px #cc9216, 0 2px 0 #cc9216, 0 3px 5px rgba(0,0,0,0.2);
}

.btn.pri:disabled, .btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

/* Green button - Buy/Upgrade/Enter */
.btn.good, button[data-act="open"], button[data-act="mastery"],
button:not(.pri):not(.sm):not(.ghost)[data-act*="upgrade"] {
  background: linear-gradient(180deg, #6bc96b 0%, #4ba84b 100%);
  color: #fff !important;
  font-weight: 800;
  border: none;
  border-radius: 12px;
  box-shadow: 0 0 0 2px #3a8a3a, 0 4px 0 #3a8a3a, 0 5px 8px rgba(0,0,0,0.25);
  padding: 10px 20px;
  cursor: pointer;
  transition: transform 0.1s;
}

.btn.good:hover {
  transform: translateY(-2px);
}

.btn.good:active {
  transform: translateY(2px);
}

/* Nút phụ mặc định: kem viền gỗ (nút xanh dương chỉ dùng .btn.blue) */
.btn:not(.pri):not(.good):not(.sm):not(.ghost):not(.blue) {
  background: linear-gradient(180deg, #fffaf2 0%, #f6e3cc 100%);
  color: #4a2c1a;
  font-weight: 800;
  border: none;
  border-radius: 12px;
  box-shadow: 0 0 0 2px #8b5a3c, 0 4px 0 #8b5a3c, 0 5px 8px rgba(0,0,0,0.2);
  padding: 10px 20px;
  cursor: pointer;
  transition: transform 0.1s;
}
.btn.blue {
  background: linear-gradient(180deg, #5ba8d6 0%, #3a86b8 100%);
  color: #fff !important;
  font-weight: 700;
  border: none;
  border-radius: 12px;
  box-shadow: 0 0 0 2px #2e6a95, 0 4px 0 #2e6a95, 0 5px 8px rgba(0,0,0,0.25);
  padding: 10px 20px;
  cursor: pointer;
  transition: transform 0.1s;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(2px);
}

/* Small buttons */
.btn.sm {
  padding: 8px 16px;
  font-size: 14px;
  border-radius: 10px;
  box-shadow: 0 0 0 1.5px #cc9216, 0 3px 0 #cc9216, 0 4px 6px rgba(0,0,0,0.2);
}

.btn.sm.pri {
  box-shadow: 0 0 0 1.5px #cc9216, 0 3px 0 #cc9216, 0 4px 6px rgba(0,0,0,0.2);
}

.btn.sm.good {
  box-shadow: 0 0 0 1.5px #3a8a3a, 0 3px 0 #3a8a3a, 0 4px 6px rgba(0,0,0,0.2);
}

.btn.sm:not(.pri):not(.good) {
  box-shadow: 0 0 0 1.5px #2e6a95, 0 3px 0 #2e6a95, 0 4px 6px rgba(0,0,0,0.2);
}

/* Ghost buttons stay as is for now */
.btn.ghost {
  background: rgba(255, 255, 255, 0.85);
  border: 2px solid #d4c4b0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  color: #5d3a1a;
}

/* ========== CARDS & PANELS ========== */
.card {
  background: #fff;
  border: 3px solid #b89968;
  border-radius: 16px;
  padding: 14px;
  margin: 10px 0;
  box-shadow: 0 3px 10px rgba(139, 111, 71, 0.18);
}

/* ========== SECTIONS ========== */
.sec {
  color: #5d3a1a;
  font-weight: 800;
  font-size: 16px;
  margin: 20px 0 10px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* ========== TABS ========== */
.shop-tabs, .tabs {
  display: flex;
  gap: 6px;
  margin: 12px 0;
  overflow-x: auto;
  padding: 0 0 6px;
}

.shop-tabs button, .tabs button {
  background: #f5ede3;
  border: 2px solid #d4c4b0;
  border-radius: 12px 12px 0 0;
  padding: 10px 18px;
  font-weight: 700;
  color: #8b6f47;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.shop-tabs button.active, .tabs button.active,
.shop-tabs button.on, .tabs button.on {
  background: linear-gradient(180deg, #f5a8c8 0%, #e87ba8 100%);
  color: #fff !important;
  border-color: #d6588a;
  box-shadow: 0 3px 8px rgba(230, 123, 168, 0.3);
}

.shop-tabs button:hover, .tabs button:hover {
  background: #fff;
}

/* ========== LIST ITEMS / ROWS ========== */
.list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 10px 0;
}

.item, .purchase-row, .action-item {
  background: #fff;
  border: 2px solid #e8dcc8;
  border-radius: 14px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 2px 8px rgba(139, 111, 71, 0.12);
  transition: transform 0.15s, box-shadow 0.15s;
}

.item:hover, .purchase-row:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(139, 111, 71, 0.18);
}

.item .em, .purchase-row .em, .action-item .em {
  font-size: 36px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fef5ed;
  border-radius: 12px;
  flex-shrink: 0;
  box-shadow: inset 0 2px 6px rgba(139, 111, 71, 0.08);
}

.item .grow, .purchase-row .grow, .action-item .grow {
  flex: 1;
  min-width: 0;
}

.item b, .purchase-row b, .action-item b {
  display: block;
  color: #5d3a1a;
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 2px;
}

.item small, .purchase-row small, .action-item small {
  display: block;
  color: #8b6f47;
  font-size: 13px;
}

/* ========== PROGRESS BARS ========== */
.prog, .goalbar {
  background: #e8dcc8;
  height: 12px;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  margin: 6px 0;
}

.prog i, .goalbar i {
  display: block;
  height: 100%;
  background: linear-gradient(180deg, #6bc96b 0%, #4ba84b 100%);
  border-radius: 12px;
  transition: width 0.4s ease-out;
  box-shadow: inset 0 1px 3px rgba(255,255,255,0.4);
}

/* Pink variant for some progress */
.prog.pink i, [data-type="pink"] .prog i {
  background: linear-gradient(180deg, #f5a8c8 0%, #e87ba8 100%);
}

/* ========== BADGES ========== */
.badge {
  display: inline-block;
  background: #e8dcc8;
  color: #5d3a1a;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.badge.pri {
  background: linear-gradient(180deg, #f5a8c8 0%, #e87ba8 100%);
  color: #fff;
}

.badge.good {
  background: linear-gradient(180deg, #6bc96b 0%, #4ba84b 100%);
  color: #fff;
}

.badge.warn {
  background: linear-gradient(180deg, #ffb84a 0%, #ff9820 100%);
  color: #fff;
}

.badge.neg, .badge.bad {
  background: linear-gradient(180deg, #ff6b6b 0%, #d94545 100%);
  color: #fff;
}

/* ========== STATS GRID ========== */
.grid3, .grid2 {
  display: grid;
  gap: 10px;
  margin: 12px 0;
}

.grid3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid2 {
  grid-template-columns: repeat(2, 1fr);
}

.stat {
  background: #fff;
  border: 2px solid #e8dcc8;
  border-radius: 12px;
  padding: 14px 10px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(139, 111, 71, 0.1);
}

.stat b {
  display: block;
  font-size: 22px;
  color: #5d3a1a;
  margin-bottom: 4px;
  font-weight: 900;
}

.stat small {
  display: block;
  font-size: 12px;
  color: #8b6f47;
}

/* ========== GOALS / QUESTS ========== */
.goal {
  background: #fff;
  border: 2px solid #e8dcc8;
  border-radius: 14px;
  padding: 14px;
  margin: 10px 0;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  box-shadow: 0 2px 8px rgba(139, 111, 71, 0.12);
}

.goal .ck {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #e8dcc8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  color: #8b6f47;
  font-weight: 700;
}

.goal.done .ck {
  background: linear-gradient(180deg, #6bc96b 0%, #4ba84b 100%);
  color: #fff;
}

.goal .t {
  font-weight: 700;
  color: #5d3a1a;
  margin-bottom: 4px;
}

/* ========== TOGGLES & SLIDERS ========== */
/* Toggle switch - green "Bật" pill */
input[type="checkbox"].toggle {
  -webkit-appearance: none;
  appearance: none;
  width: 58px;
  height: 30px;
  background: #d4c4b0;
  border-radius: 30px;
  position: relative;
  cursor: pointer;
  transition: background 0.3s;
}

input[type="checkbox"].toggle:checked {
  background: linear-gradient(180deg, #6bc96b 0%, #4ba84b 100%);
}

input[type="checkbox"].toggle::before {
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  background: #fff;
  border-radius: 50%;
  top: 3px;
  left: 3px;
  transition: left 0.3s;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

input[type="checkbox"].toggle:checked::before {
  left: 31px;
}

/* Slider - pink */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 8px;
  background: #e8dcc8;
  outline: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  margin-top: -6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(180deg, #f5a8c8 0%, #e87ba8 100%);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(230, 123, 168, 0.4);
}

input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(180deg, #f5a8c8 0%, #e87ba8 100%);
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 6px rgba(230, 123, 168, 0.4);
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 8px;
  background: linear-gradient(to right,
    #f5a8c8 0%, #f5a8c8 var(--value, 50%),
    #e8dcc8 var(--value, 50%), #e8dcc8 100%);
}

/* ========== SHOP ITEM TILES ========== */
.shop-grid, .item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin: 12px 0;
}

.shop-item, .item-tile {
  background: #fef5ed;
  border: 2px solid #e8dcc8;
  border-radius: 14px;
  padding: 12px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(139, 111, 71, 0.12);
  transition: transform 0.15s, box-shadow 0.15s;
  cursor: pointer;
}

.shop-item:hover, .item-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(139, 111, 71, 0.2);
}

.shop-item .icon, .item-tile .icon {
  font-size: 48px;
  margin: 8px 0;
  display: block;
}

.shop-item b, .item-tile b {
  display: block;
  color: #5d3a1a;
  font-size: 14px;
  margin: 6px 0;
}

.shop-item small, .item-tile small {
  display: block;
  color: #8b6f47;
  font-size: 12px;
  margin-bottom: 8px;
}

/* "Mới" / "Hot" badges on shop items */
.shop-item .tag, .item-tile .tag {
  position: absolute;
  top: 4px;
  right: 4px;
  background: linear-gradient(180deg, #ff6b6b 0%, #d94545 100%);
  color: #fff;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.shop-item .tag.new, .item-tile .tag.new {
  background: linear-gradient(180deg, #6bc96b 0%, #4ba84b 100%);
}

/* ========== TOASTS ========== */
.toast {
  background: #fff !important;
  border: 2px solid #e8dcc8 !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 16px rgba(139, 111, 71, 0.25) !important;
  padding: 12px 18px !important;
  color: #5d3a1a !important;
  font-weight: 600;
}

.toast.good {
  border-color: #6bc96b !important;
  background: #f0fdf0 !important;
}

.toast.warn {
  border-color: #ffb84a !important;
  background: #fffbf0 !important;
}

.toast.bad {
  border-color: #ff6b6b !important;
  background: #fff5f5 !important;
}

/* ========== RANKING TABLE ========== */
.ranking-table {
  margin: 12px 0;
}

.ranking-row {
  background: #fff;
  border: 2px solid #e8dcc8;
  border-radius: 14px;
  padding: 10px 12px;
  margin: 8px 0;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 2px 6px rgba(139, 111, 71, 0.1);
}

.ranking-row .rank {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #e8dcc8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 16px;
  color: #5d3a1a;
  flex-shrink: 0;
}

.ranking-row.rank-1 .rank {
  background: linear-gradient(135deg, #ffd84a 0%, #ffb820 100%);
  color: #fff;
  font-size: 20px;
}

.ranking-row.rank-2 .rank {
  background: linear-gradient(135deg, #d4d4d4 0%, #a8a8a8 100%);
  color: #fff;
}

.ranking-row.rank-3 .rank {
  background: linear-gradient(135deg, #e8a869 0%, #cd853f 100%);
  color: #fff;
}

/* ========== MARKET / CHAT ========== */
.chat-message {
  background: #fff;
  border: 2px solid #e8dcc8;
  border-radius: 14px;
  padding: 10px 12px;
  margin: 8px 0;
  box-shadow: 0 2px 6px rgba(139, 111, 71, 0.1);
}

.chat-message.me {
  background: #f0f8ff;
  border-color: #5ba8d6;
  margin-left: 40px;
}

/* ========== PURCHASE OFFER ========== */
.purchase-offer {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.purchase-offer > span {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.purchase-offer small {
  color: #8b6f47;
  font-size: 11px;
  text-transform: uppercase;
}

.purchase-offer b {
  color: #5d3a1a;
  font-size: 16px;
}

/* ========== EMOJI ICONS IN TILES ========== */
.ico {
  display: inline-block;
  font-style: normal;
}

/* Emoji tiles for items without painted assets */
.item-count, .stock-tile {
  position: relative;
  background: #fef5ed;
  border: 2px solid #e8dcc8;
  border-radius: 12px;
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  box-shadow: inset 0 2px 6px rgba(139, 111, 71, 0.08);
}

.item-count::after {
  content: attr(data-count);
  position: absolute;
  bottom: 2px;
  right: 4px;
  background: rgba(93, 58, 26, 0.85);
  color: #fff;
  font-size: 11px;
  padding: 2px 5px;
  border-radius: 6px;
  font-weight: 700;
}

/* ========== NPC PORTRAITS ========== */
.npc-portrait-wrap {
  position: relative;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
}

.npc-portrait-wrap > * {
  position: absolute;
  top: 0;
  left: 0;
}

.npc-portrait, canvas[data-look] {
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  object-fit: cover;
  object-position: top center;
  border: 3px solid #e8dcc8 !important;
  box-shadow: 0 2px 8px rgba(139, 111, 71, 0.15) !important;
  flex-shrink: 0;
}

/* ========== CAREER CARDS (Phố nghề) ========== */
.career-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin: 12px 0;
}

.career-card {
  background: #fff;
  border: 3px solid #b89968;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 3px 12px rgba(139, 111, 71, 0.18);
  position: relative;
}

.career-art {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.career-card img {
  width: 100%;
  height: auto;
  display: block;
}

.career-info {
  padding: 12px;
  text-align: center;
}

.career-info b {
  display: block;
  font-size: 18px;
  color: #5d3a1a;
  margin-bottom: 6px;
  font-weight: 900;
}

.career-info small {
  display: block;
  color: #8b6f47;
  font-size: 13px;
  margin-bottom: 4px;
}

.career-info button {
  margin-top: 8px;
  width: 100%;
}

.career-locked {
  position: absolute;
  inset: 0;
  background: rgba(245, 237, 227, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.career-locked::before {
  content: '🔒';
  font-size: 48px;
}

.career-locked span {
  font-weight: 800;
  color: #8b6f47;
  font-size: 14px;
}

/* ========== STORY CHAPTERS ========== */
.story-text {
  line-height: 1.7;
  color: #5d3a1a;
  margin: 12px 0;
}

/* ========== TALENT GRID ========== */
.talent-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 12px 0;
}

.talent-card {
  background: #fff;
  border: 2px solid #e8dcc8;
  border-radius: 14px;
  padding: 12px;
  display: flex;
  gap: 12px;
  align-items: center;
  box-shadow: 0 2px 6px rgba(139, 111, 71, 0.1);
}

.talent-card .em {
  font-size: 32px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fef5ed;
  border-radius: 12px;
  flex-shrink: 0;
}

.talent-pips {
  display: flex;
  gap: 4px;
  margin-top: 6px;
}

.talent-pips i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #e8dcc8;
  display: block;
}

.talent-pips i.on {
  background: linear-gradient(180deg, #ffd84a 0%, #ffb820 100%);
  box-shadow: 0 0 6px rgba(255, 184, 74, 0.6);
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
  .grid3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .shop-grid, .item-grid {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  }

  .career-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .sheet h2 {
    font-size: 20px !important;
    padding-left: 10px !important;
  }
}

/* ========== KICKER TEXT ========== */
.kicker {
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #e87ba8;
  margin-bottom: 6px;
}

/* ========== MARKET PULSE ========== */
.market-pulse {
  background: #fff;
  border: 2px solid #e8dcc8;
  border-radius: 14px;
  padding: 14px;
  margin: 12px 0;
  box-shadow: 0 2px 8px rgba(139, 111, 71, 0.12);
}

.market-forecast {
  display: flex;
  gap: 8px;
  margin: 10px 0;
  overflow-x: auto;
  padding: 6px 0;
}

.market-forecast > span {
  background: #fef5ed;
  border: 2px solid #e8dcc8;
  border-radius: 10px;
  padding: 8px 12px;
  text-align: center;
  min-width: 90px;
  flex-shrink: 0;
}

.market-forecast > span.today {
  border-color: #f5a8c8;
  background: #fff0f6;
}

/* ========== TOWN EVENT ========== */
.town-event {
  background: linear-gradient(135deg, #fff9f2 0%, #ffe8d9 100%);
  border: 3px solid #ffd84a !important;
}

/* ========== DELIVERY COMBO ========== */
.delivery-combo {
  background: linear-gradient(135deg, #fff4e6 0%, #ffe0b2 100%);
  border: 2px solid #ffb84a;
  border-radius: 14px;
  padding: 12px 16px;
  margin: 12px 0;
  text-align: center;
  box-shadow: 0 3px 10px rgba(255, 184, 74, 0.25);
}

.delivery-combo b {
  font-size: 24px;
  color: #ff6f00;
  font-weight: 900;
}

/* ========== MASTERY CARD ========== */
.mastery-card {
  background: linear-gradient(135deg, #f0f8ff 0%, #e8f4ff 100%);
  border: 2px solid #5ba8d6 !important;
}

/* ========== TALENT SUMMARY ========== */
.talent-summary {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 10px 0;
}

.talent-summary > span {
  background: #fef5ed;
  border: 2px solid #e8dcc8;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 700;
  color: #5d3a1a;
}

/* ========== MISC UTILITIES ========== */
.muted {
  color: #8b6f47 !important;
}

.small {
  font-size: 13px !important;
}

.neg {
  color: #d94545 !important;
}

.row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.grow {
  flex: 1;
  min-width: 0;
}

/* ========== CỬA HÀNG: phủ kín màn hình ========== */
.sheet[data-view="shop"]{top:0;max-height:none;height:100dvh;border-radius:0;padding-top:var(--safe-t,0)}
.sheet[data-view="shop"] .sheet-body{flex:1;min-height:0}
@media (min-width:1024px){
  .sheet[data-view="shop"]{left:0;right:0;top:0;bottom:0;transform:none;width:auto;height:auto;max-height:none;border-radius:0;animation:fade .18s}
  .sheet[data-view="shop"] .sheet-body{padding:6px 24px 28px}
  .sheet[data-view="shop"] .shop-grid,.sheet[data-view="shop"] .item-grid{grid-template-columns:repeat(auto-fill,minmax(168px,1fr))}
}
/* Sân khấu xem trước Cửa hàng: canvas cao theo cột ví, bo góc */
.shop-hero{align-items:stretch!important;padding:8px!important}
.shop-hero canvas{border-radius:12px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.6)}
/* Avatar chibi cho cư dân/người chơi thật */
.chibi-av{display:inline-block;width:30px;height:30px;border-radius:50%;object-fit:cover;vertical-align:middle;border:2px solid #fff;box-shadow:0 0 0 1.5px rgba(122,74,48,.35),0 2px 4px rgba(90,50,30,.18);background:#fff}
.rank-avatar .chibi-av,.neighbor-avatar .chibi-av{width:38px;height:38px}
.resident-chips .chibi-av{width:22px;height:22px;border-width:1.5px;margin-right:2px}
.visit-room .chibi-av{width:58px;height:58px}
.modal .kicker .chibi-av{width:20px;height:20px;border-width:1px}
/* Nghề chưa mở: vẫn thấy tranh tiệm (xám nhẹ) + khoá vẽ tay */
.career-card.locked .career-art img{filter:grayscale(.75) brightness(.96) blur(.4px)}
.career-locked{background:linear-gradient(180deg,rgba(255,248,240,.15),rgba(255,244,232,.55))!important;justify-content:center}
.career-locked::before{content:''!important;width:54px;height:54px;border-radius:50%;background:#fff8ef url(../assets/lum/ui/lock.webp) center/34px no-repeat;box-shadow:0 0 0 3px rgba(255,255,255,.8),0 4px 10px rgba(90,50,30,.25)}
.career-locked span{background:rgba(255,250,242,.95);border:1.5px solid rgba(122,74,48,.35);border-radius:999px;padding:3px 12px;font-size:12.5px!important;color:#7a4a30!important}
/* Ngoài phố → Đi đâu: ảnh khu vẽ tay */
.life-thumb{flex:0 0 64px;width:64px;height:56px;display:grid;place-items:center;border-radius:12px;background:radial-gradient(circle at 50% 70%,#fff6e8,#ffe3d4);border:1.5px solid rgba(122,74,48,.22);font-size:28px;overflow:hidden}
.life-thumb img{max-width:58px;max-height:52px;object-fit:contain;filter:drop-shadow(0 2px 2px rgba(90,50,30,.2))}

/* ========== Rà soát 10/2026: nhãn mục, mô tả, tab con, thẻ nghề ========== */
.sec {
  display: block !important;
  width: fit-content;
  max-width: 100%;
  color: #fff7e6 !important;
  background: linear-gradient(135deg, #8b6f47, #6b4423) !important;
  padding: 6px 14px !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  line-height: 1.35;
  text-shadow: 0 1px 1px rgba(60, 30, 10, .45);
  box-shadow: 0 3px 6px rgba(107, 68, 35, .25);
}
.grow > b, .grow > small { display: block; }
.grow > small { margin-top: 2px; line-height: 1.35; }
.stabs { flex-wrap: wrap; overflow-x: visible; }
.sheet[data-view="life"] { height: 86dvh; }
.dex-card h3 { margin: 0 0 8px; font-size: 15px; }
.dex-card p { margin: 4px 0; }
.dex-empty { text-align: center; padding: 14px 6px; }
.card-header { font-weight: 900; color: #5d3a1a; margin-bottom: 8px; }
.list .item { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
input[type="range"]::-moz-range-progress { height: 8px; border-radius: 8px; background: #f5a8c8; }
@media (max-width: 768px) {
  .career-art img { aspect-ratio: 16 / 10; object-fit: cover; object-position: center 30%; height: auto; max-height: 200px; }
}
@media (max-width: 460px) {
  .career-grid { grid-template-columns: 1fr; }
}

/* ========== PURCHASE ROW — mobile không đè chữ ========== */
.purchase-row > :first-child:not(.em), .purchase-row > .grow { flex: 1; min-width: 0; }
.purchase-row > .em { flex: 0 0 auto; }
@media (max-width: 620px) {
  .purchase-row { flex-wrap: wrap; align-items: center; }
  .purchase-row > :first-child:not(.em) { flex: 1 1 100%; }
  .purchase-row > .em + .grow { flex: 1 1 0; }
  .purchase-offer { width: 100%; padding-left: 0; flex-wrap: nowrap; gap: 8px; }
  .purchase-offer > span { flex: 0 0 auto; min-width: 64px; align-items: center; }
  .purchase-offer > .btn { flex: 1; min-height: 40px; }
}
.list > .item, .list > .purchase-row, .list > .action-item { flex-shrink: 0; }