@tailwind base;
@tailwind components;
@tailwind utilities;

/* ========================================
   DNFNOW - Custom Styles
   ======================================== */

/* Glass Card */
.glass-card {
    background: rgba(24, 27, 46, 0.6);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(42, 46, 74, 0.5);
    border-radius: 12px;
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #0f1119; }
::-webkit-scrollbar-thumb { background: #2a2e4a; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #3a3f5e; }

/* Chart container */
.chart-container {
    position: relative;
    width: 100%;
    height: 400px;
}

/* Logo blend — shift purple bg to match dark navy nav */
.logo-blend {
    mix-blend-mode: lighten;
    filter: saturate(0.3) brightness(0.85) hue-rotate(-30deg);
}

/* Page transitions */
.page-fade-in {
    animation: fadeIn 0.3s ease-in-out;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Prosper v4 ad containers */
.ad-container { display: flex; justify-content: center; align-items: center; margin: 1rem 0; }
.ad-container-top { min-height: 0; }
@media (max-width: 767px) { .ad-container-top { min-height: 258px; } }
.ad-container-bottom { min-height: 258px; }
.ad-container-video { min-height: 0; padding: 1rem 0; }
.ad-container-mobile-takeover { min-height: 258px; }
@media (max-width: 767px) {
    .ad-container-bottom { min-height: 608px; }
    .ad-container-video { display: none; }
}
@media (min-width: 768px) {
    .ad-container-mobile-takeover { display: none; }
}

/* Price table: name column stretches, price columns stay at natural width */
.tbl-fixed { font-size: 0.85rem; }
.tbl-fixed th,
.tbl-fixed td { padding: 0.4rem 0.5rem; white-space: nowrap; vertical-align: middle; }
td.tbl-col-name { width: 100%; max-width: 1px; }
td.tbl-col-name > div { overflow: hidden; min-width: 0; }
td.tbl-col-name .truncate { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
@media (max-width: 640px) {
    .tbl-fixed { font-size: 0.75rem; }
    .tbl-fixed th, .tbl-fixed td { padding: 0.25rem 0.3rem; }
}

/* Compact table (non-fixed, for item detail etc.) */
.tbl-compact { font-size: 0.85rem; }
.tbl-compact th,
.tbl-compact td { padding: 0.4rem 0.5rem; white-space: nowrap; vertical-align: middle; }
@media (max-width: 640px) {
    .tbl-compact { font-size: 0.75rem; }
    .tbl-compact th, .tbl-compact td { padding: 0.25rem 0.3rem; }
}

/* Price colors */
.text-up { color: #22c55e; }
.text-down { color: #ef4444; }

/* Tab transition helper (Alpine.js tabs) */
.tab-panel-hidden { display: none; }

/* Item button hover */
.item-btn {
    transition: background 0.15s, border-color 0.15s;
}
.item-btn:hover {
    background: rgba(99, 102, 241, 0.1);
    border-color: #6366f1;
}

/* Cash mode — KRW price highlight */
.cash-mode .td-unit,
.cash-mode .td-total { color: #34d399; }
.cash-mode thead th:nth-child(3),
.cash-mode thead th:nth-child(4) { color: #34d399; }

/* Rarity badge colors */
.rarity-common { color: #FFFFFF; }
.rarity-uncommon { color: #68D5ED; }
.rarity-rare { color: #B36BFF; }
.rarity-unique { color: #FF00FF; }
.rarity-chronicle { color: #FF6666; }
.rarity-legendary { color: #FF7800; }
.rarity-epic { color: #FFB400; }
.rarity-myth { color: #FF965A; text-shadow: 0 0 6px rgba(255,149,90,0.5); }
.rarity-primal { color: #A8E6FF; text-shadow: 0 0 6px rgba(168,230,255,0.5); }