/* ==================== 
   TRADER OF THE ARABIAN SEA
   Custom Styles & Islamic Patterns
   ==================== */

/* ==================== ROOT VARIABLES ==================== */
:root {
    --sand-100: #fdf9f0;
    --sand-200: #f9f0d9;
    --sand-300: #f3e2b8;
    --sand-400: #e8c878;
    --sand-500: #d4a84b;
    --sand-600: #b8862f;
    --sand-700: #8f6623;
    --lapis-500: #1e4d8c;
    --lapis-600: #1a3f73;
    --lapis-700: #152f55;
    --gold-400: #ffd700;
    --gold-500: #d4af37;
    --gold-600: #b8962f;
    --henna-500: #8b4513;
    --henna-600: #723a10;
    --turquoise-400: #40e0d0;
    --parchment: #f4e4c1;
    --ink: #2c1810;
}

/* ==================== BASE STYLES ==================== */
* {
    box-sizing: border-box;
}

body {
    background: linear-gradient(135deg, var(--sand-200) 0%, var(--sand-100) 50%, var(--sand-200) 100%);
}

/* ==================== SCREEN MANAGEMENT ==================== */
.screen {
    display: none;
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}

.screen.active {
    display: flex;
    opacity: 1;
}

#game-screen.active {
    display: block;
}

/* ==================== ISLAMIC GEOMETRIC PATTERN ==================== */
.islamic-pattern {
    background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%231a3f73' stroke-width='1'%3E%3Cpath d='M0 0l40 40M40 0l40 40M0 40l40 40M40 40l40 40M0 0l40-40M40 0l40-40M0 40l40-40M40 40l40-40'/%3E%3Ccircle cx='40' cy='40' r='20'/%3E%3Ccircle cx='0' cy='0' r='20'/%3E%3Ccircle cx='80' cy='0' r='20'/%3E%3Ccircle cx='0' cy='80' r='20'/%3E%3Ccircle cx='80' cy='80' r='20'/%3E%3Cpath d='M40 20l20 20-20 20-20-20z'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 80px 80px;
}

/* ==================== GEOMETRIC BORDER ==================== */
.geometric-border {
    background: linear-gradient(90deg, 
        transparent 0%, 
        var(--gold-500) 10%, 
        var(--lapis-600) 20%, 
        var(--gold-500) 30%, 
        var(--lapis-600) 40%, 
        var(--gold-500) 50%, 
        var(--lapis-600) 60%, 
        var(--gold-500) 70%, 
        var(--lapis-600) 80%, 
        var(--gold-500) 90%, 
        transparent 100%
    );
    mask-image: url("data:image/svg+xml,%3Csvg width='200' height='20' viewBox='0 0 200 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10 L10 0 L20 10 L30 0 L40 10 L50 0 L60 10 L70 0 L80 10 L90 0 L100 10 L110 0 L120 10 L130 0 L140 10 L150 0 L160 10 L170 0 L180 10 L190 0 L200 10 L190 20 L180 10 L170 20 L160 10 L150 20 L140 10 L130 20 L120 10 L110 20 L100 10 L90 20 L80 10 L70 20 L60 10 L50 20 L40 10 L30 20 L20 10 L10 20 L0 10Z' fill='black'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='200' height='20' viewBox='0 0 200 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10 L10 0 L20 10 L30 0 L40 10 L50 0 L60 10 L70 0 L80 10 L90 0 L100 10 L110 0 L120 10 L130 0 L140 10 L150 0 L160 10 L170 0 L180 10 L190 0 L200 10 L190 20 L180 10 L170 20 L160 10 L150 20 L140 10 L130 20 L120 10 L110 20 L100 10 L90 20 L80 10 L70 20 L60 10 L50 20 L40 10 L30 20 L20 10 L10 20 L0 10Z' fill='black'/%3E%3C/svg%3E");
    mask-size: 100% 100%;
    -webkit-mask-size: 100% 100%;
}

/* ==================== DHOW SHIP ILLUSTRATION ==================== */
.dhow-container {
    width: 200px;
    height: 120px;
    position: relative;
}

.dhow-ship {
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 120' xmlns='http://www.w3.org/2000/svg'%3E%3C!-- Hull --%3E%3Cpath d='M30 80 Q50 95 100 95 Q150 95 170 80 L160 70 Q100 75 40 70 Z' fill='%238b4513'/%3E%3Cpath d='M40 70 Q100 75 160 70 L155 60 Q100 65 45 60 Z' fill='%23a0522d'/%3E%3C!-- Mast --%3E%3Crect x='95' y='20' width='6' height='60' fill='%235c4b19'/%3E%3C!-- Sail --%3E%3Cpath d='M100 25 Q140 45 100 75 Z' fill='%23f4e4c1' stroke='%23d4af37' stroke-width='1'/%3E%3Cpath d='M96 25 Q56 45 96 75 Z' fill='%23fdf9f0' stroke='%23d4af37' stroke-width='1'/%3E%3C!-- Rigging --%3E%3Cline x1='98' y1='20' x2='160' y2='70' stroke='%235c4b19' stroke-width='1'/%3E%3Cline x1='98' y1='20' x2='40' y2='70' stroke='%235c4b19' stroke-width='1'/%3E%3C!-- Flag --%3E%3Cpath d='M98 15 L98 25 L115 20 Z' fill='%231a3f73'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.dhow-waves {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30px;
    background: linear-gradient(180deg, transparent 0%, rgba(30, 77, 140, 0.2) 100%);
    border-radius: 50%;
    animation: waves 2s ease-in-out infinite;
}

/* ==================== CARDS ==================== */
.card {
    background: linear-gradient(145deg, var(--parchment) 0%, var(--sand-100) 100%);
    border: 2px solid var(--sand-400);
    border-radius: 12px;
    box-shadow: 
        0 4px 6px rgba(44, 24, 16, 0.1),
        0 1px 3px rgba(44, 24, 16, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    overflow: hidden;
}

.card-header {
    padding: 1rem 1.25rem;
    background: linear-gradient(180deg, rgba(212, 175, 55, 0.1) 0%, transparent 100%);
    border-bottom: 1px solid var(--sand-300);
}

.card-body {
    padding: 1.25rem;
}

/* ==================== BUTTONS ==================== */
.btn-primary {
    background: linear-gradient(180deg, var(--lapis-500) 0%, var(--lapis-600) 100%);
    color: var(--sand-100);
    font-family: 'Reem Kufi', sans-serif;
    font-weight: 500;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    border: 2px solid var(--lapis-700);
    box-shadow: 
        0 4px 6px rgba(21, 47, 85, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 6px 12px rgba(21, 47, 85, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.btn-primary:hover::before {
    left: 100%;
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow: 
        0 2px 4px rgba(21, 47, 85, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.btn-secondary {
    background: linear-gradient(180deg, var(--sand-100) 0%, var(--sand-200) 100%);
    color: var(--henna-600);
    font-family: 'Reem Kufi', sans-serif;
    font-weight: 500;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    border: 2px solid var(--sand-400);
    box-shadow: 
        0 2px 4px rgba(44, 24, 16, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-secondary:hover {
    background: linear-gradient(180deg, var(--sand-200) 0%, var(--sand-300) 100%);
    border-color: var(--gold-500);
    transform: translateY(-1px);
}

.btn-secondary:active {
    transform: translateY(0);
}

/* Choice Buttons in Events */
.choice-btn {
    display: block;
    width: 100%;
    text-align: left;
    padding: 1rem 1.25rem;
    background: linear-gradient(180deg, var(--sand-100) 0%, var(--sand-200) 100%);
    border: 2px solid var(--sand-400);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Amiri', serif;
    font-size: 1rem;
    color: var(--ink);
}

.choice-btn:hover {
    border-color: var(--gold-500);
    background: linear-gradient(180deg, var(--sand-200) 0%, var(--sand-300) 100%);
    transform: translateX(4px);
    box-shadow: -4px 0 0 var(--gold-500);
}

.choice-btn .choice-label {
    font-family: 'Reem Kufi', sans-serif;
    font-weight: 600;
    color: var(--lapis-600);
    margin-bottom: 0.25rem;
}

.choice-btn .choice-effect {
    font-size: 0.875rem;
    color: var(--sand-700);
    font-style: italic;
}

.choice-btn.positive:hover {
    border-color: #22c55e;
    box-shadow: -4px 0 0 #22c55e;
}

.choice-btn.negative:hover {
    border-color: #ef4444;
    box-shadow: -4px 0 0 #ef4444;
}

.choice-btn.neutral:hover {
    border-color: var(--turquoise-400);
    box-shadow: -4px 0 0 var(--turquoise-400);
}

/* ==================== BIRTHPLACE BUTTONS ==================== */
.birthplace-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: linear-gradient(180deg, var(--sand-100) 0%, var(--sand-200) 100%);
    border: 2px solid var(--sand-400);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--ink);
}

.birthplace-btn:hover {
    border-color: var(--gold-500);
    transform: translateY(-2px);
}

.birthplace-btn.selected {
    background: linear-gradient(180deg, var(--lapis-500) 0%, var(--lapis-600) 100%);
    border-color: var(--gold-500);
    color: var(--sand-100);
    box-shadow: 0 4px 12px rgba(21, 47, 85, 0.3);
}

.birthplace-btn.selected span {
    color: var(--sand-100);
}

/* ==================== PILLAR CARDS ==================== */
.pillar-card {
    text-align: center;
    padding: 0.75rem 0.5rem;
    background: linear-gradient(180deg, var(--sand-100) 0%, var(--sand-200) 100%);
    border: 1px solid var(--sand-400);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.pillar-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(44, 24, 16, 0.1);
}

.pillar-card.completed {
    background: linear-gradient(180deg, rgba(212, 175, 55, 0.2) 0%, rgba(212, 175, 55, 0.1) 100%);
    border-color: var(--gold-500);
}

.pillar-icon {
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
    color: var(--lapis-500);
}

.pillar-card.completed .pillar-icon {
    color: var(--gold-500);
}

.pillar-name {
    font-family: 'Reem Kufi', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--lapis-600);
    margin-bottom: 0.5rem;
}

@media (min-width: 768px) {
    .pillar-name {
        font-size: 0.875rem;
    }
    .pillar-icon {
        font-size: 2rem;
    }
}

.pillar-progress {
    height: 4px;
    background: var(--sand-300);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 0.25rem;
}

.pillar-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--gold-500) 0%, var(--gold-400) 100%);
    border-radius: 2px;
    transition: width 0.5s ease;
}

.pillar-status {
    color: var(--sand-600);
}

/* ==================== LIFE LOG ==================== */
#life-log {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

#life-log.expanded {
    max-height: 300px;
}

.log-entry {
    padding: 0.5rem;
    border-left: 3px solid var(--sand-400);
    margin-left: 0.5rem;
    color: var(--sand-700);
}

.log-entry.positive {
    border-left-color: #22c55e;
}

.log-entry.negative {
    border-left-color: #ef4444;
}

.log-entry.historical {
    border-left-color: var(--gold-500);
    background: rgba(212, 175, 55, 0.1);
}

.log-entry .log-date {
    font-family: 'Reem Kufi', sans-serif;
    font-size: 0.75rem;
    color: var(--lapis-600);
}

/* ==================== MODAL ==================== */
#modal-overlay {
    backdrop-filter: blur(4px);
}

#modal-overlay.active {
    display: flex;
}

/* ==================== TOAST NOTIFICATIONS ==================== */
.toast {
    padding: 1rem 1.5rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(44, 24, 16, 0.2);
    animation: slideInRight 0.3s ease, fadeOut 0.3s ease 2.7s forwards;
    font-family: 'Reem Kufi', sans-serif;
}

.toast.success {
    background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%);
    color: white;
}

.toast.warning {
    background: linear-gradient(180deg, var(--gold-400) 0%, var(--gold-500) 100%);
    color: var(--ink);
}

.toast.error {
    background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

.toast.info {
    background: linear-gradient(180deg, var(--lapis-500) 0%, var(--lapis-600) 100%);
    color: var(--sand-100);
}

/* ==================== HISTORICAL BANNER ==================== */
#historical-banner.show {
    transform: translateY(0);
}

/* ==================== TRADE & INVENTORY ITEMS ==================== */
.trade-item, .inventory-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--sand-100);
    border: 1px solid var(--sand-300);
    border-radius: 6px;
    margin-bottom: 0.5rem;
    transition: all 0.2s ease;
}

.trade-item:hover, .inventory-item:hover {
    border-color: var(--gold-500);
    background: var(--sand-200);
}

.trade-item .item-info, .inventory-item .item-info {
    flex: 1;
}

.trade-item .item-name, .inventory-item .item-name {
    font-family: 'Reem Kufi', sans-serif;
    font-weight: 600;
    color: var(--lapis-600);
}

.trade-item .item-desc, .inventory-item .item-desc {
    font-size: 0.875rem;
    color: var(--sand-700);
}

.trade-item .item-price {
    font-family: 'Reem Kufi', sans-serif;
    font-weight: 600;
    color: var(--gold-600);
}

.trade-btn {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    margin-left: 0.5rem;
}

/* ==================== TRAVEL MAP ==================== */
.travel-location {
    display: flex;
    align-items: center;
    padding: 1rem;
    background: var(--sand-100);
    border: 2px solid var(--sand-300);
    border-radius: 8px;
    margin-bottom: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.travel-location:hover {
    border-color: var(--lapis-500);
    transform: translateX(4px);
}

.travel-location.current {
    border-color: var(--gold-500);
    background: rgba(212, 175, 55, 0.1);
}

.travel-location .location-icon {
    font-size: 2rem;
    margin-right: 1rem;
}

.travel-location .location-info {
    flex: 1;
}

.travel-location .location-name {
    font-family: 'Reem Kufi', sans-serif;
    font-weight: 600;
    color: var(--lapis-600);
}

.travel-location .location-desc {
    font-size: 0.875rem;
    color: var(--sand-700);
}

.travel-location .travel-cost {
    font-family: 'Reem Kufi', sans-serif;
    color: var(--gold-600);
}

/* ==================== SKILL BARS ==================== */
.skill-row {
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
}

.skill-name {
    width: 120px;
    font-family: 'Reem Kufi', sans-serif;
    color: var(--lapis-600);
}

.skill-bar {
    flex: 1;
    height: 12px;
    background: var(--sand-300);
    border-radius: 6px;
    overflow: hidden;
    margin: 0 0.75rem;
}

.skill-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--lapis-500) 0%, var(--turquoise-400) 100%);
    border-radius: 6px;
    transition: width 0.5s ease;
}

.skill-value {
    width: 40px;
    text-align: right;
    font-family: 'Reem Kufi', sans-serif;
    color: var(--sand-700);
}

/* ==================== ANIMATIONS ==================== */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { 
        opacity: 0;
        transform: translateY(20px);
    }
    to { 
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes waves {
    0%, 100% { transform: scaleX(1) translateY(0); }
    50% { transform: scaleX(1.05) translateY(2px); }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes pulseGold {
    0%, 100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.4); }
    50% { box-shadow: 0 0 0 10px rgba(212, 175, 55, 0); }
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Animation Classes */
.animate-fade-in {
    animation: fadeIn 0.5s ease-out forwards;
    opacity: 0;
}

.animate-slide-up {
    animation: slideUp 0.4s ease-out forwards;
}

.animate-float {
    animation: float 3s ease-in-out infinite;
}

.animate-pulse-gold {
    animation: pulseGold 2s infinite;
}

/* Animation Delays */
.animation-delay-200 { animation-delay: 0.2s; }
.animation-delay-400 { animation-delay: 0.4s; }
.animation-delay-600 { animation-delay: 0.6s; }
.animation-delay-800 { animation-delay: 0.8s; }
.animation-delay-1000 { animation-delay: 1s; }

/* ==================== TUTORIAL SECTIONS ==================== */
.tutorial-section {
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--sand-300);
}

.tutorial-section:last-of-type {
    border-bottom: none;
}

/* ==================== SCROLLBAR STYLING ==================== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--sand-200);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: var(--sand-500);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--sand-600);
}

/* ==================== RESPONSIVE ADJUSTMENTS ==================== */
@media (max-width: 640px) {
    .card-header, .card-body {
        padding: 0.75rem 1rem;
    }
    
    .pillar-card {
        padding: 0.5rem 0.25rem;
    }
    
    .pillar-icon {
        font-size: 1.25rem;
    }
    
    .pillar-name {
        font-size: 0.625rem;
    }
    
    .dhow-container {
        width: 150px;
        height: 90px;
    }
}

/* ==================== MODAL CONTENT SPECIFIC ==================== */
.modal-section {
    margin-bottom: 1.5rem;
}

.modal-section-title {
    font-family: 'Reem Kufi', sans-serif;
    font-size: 1.125rem;
    color: var(--lapis-600);
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--sand-300);
}

/* Quantity Controls */
.quantity-control {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.quantity-btn {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    border: 1px solid var(--sand-400);
    background: var(--sand-100);
    font-size: 1.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.quantity-btn:hover {
    background: var(--sand-200);
    border-color: var(--gold-500);
}

.quantity-input {
    width: 60px;
    text-align: center;
    padding: 0.25rem;
    border: 1px solid var(--sand-400);
    border-radius: 4px;
    font-family: 'Reem Kufi', sans-serif;
}

/* ==================== PROSE STYLING ==================== */
.prose p {
    margin-bottom: 1rem;
    line-height: 1.75;
}

.prose p:last-child {
    margin-bottom: 0;
}

/* ==================== SPECIAL STATES ==================== */
.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.highlight {
    animation: pulseGold 1s ease-in-out;
}

/* Ramadan Special Styling */
.ramadan-mode .pillar-card[data-pillar="sawm"] {
    background: linear-gradient(180deg, rgba(212, 175, 55, 0.3) 0%, rgba(212, 175, 55, 0.1) 100%);
    border-color: var(--gold-500);
}

/* Hajj Season Styling */
.hajj-season .pillar-card[data-pillar="hajj"] {
    background: linear-gradient(180deg, rgba(212, 175, 55, 0.3) 0%, rgba(212, 175, 55, 0.1) 100%);
    border-color: var(--gold-500);
}