/* ═══════════════════════════════════════════════════════════════════
   ShipFC — Custom Styles
   ═══════════════════════════════════════════════════════════════════ */

/* ── Custom scrollbar ──────────────────────────────────────────── */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #020617;
}
::-webkit-scrollbar-thumb {
    background: #1e293b;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #06b6d4;
}

/* ── FIFA Card Styling ─────────────────────────────────────────── */
.fifa-card {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0891b2 100%);
    border: 2px solid #06b6d4;
    box-shadow: 0 0 20px rgba(6, 182, 212, 0.25);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.fifa-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 12px 30px rgba(6, 182, 212, 0.45);
    border-color: #38bdf8;
}
.fifa-gold-card {
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 40%, #d97706 100%);
    border: 2px solid #f59e0b;
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.25);
}
.fifa-gold-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 12px 30px rgba(245, 158, 11, 0.45);
    border-color: #fbbf24;
}

/* ── Card Hover Tooltip ────────────────────────────────────────── */
.shipfc-card { cursor: pointer; }
.shipfc-card .shipfc-card-tooltip { opacity: 0; transition: opacity 0.3s ease; }
.shipfc-card .shipfc-card-content { transition: opacity 0.3s ease; }
.shipfc-card:hover .shipfc-card-tooltip { opacity: 1; }
.shipfc-card:hover .shipfc-card-content { opacity: 0.2; }

/* ── Hero Background ───────────────────────────────────────────── */
.hero-bg {
    background-image: url('image/shipfc_back02.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.15;
}

/* ── Hero Text Enhancement ─────────────────────────────────────── */
.hero-title {
    text-shadow: 0 4px 30px rgba(0,0,0,0.8), 0 2px 10px rgba(0,0,0,0.6);
}
.hero-subtitle {
    text-shadow: 0 2px 20px rgba(0,0,0,0.8);
}
.hero-badge {
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}