/* ============================================================
   style.css — Professional Modern Minecraft Aesthetic Theme
   Developer: Muhammad Tsaqif Noor Az Zamil
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&family=Outfit:wght@400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
    --mc-stone-bg: #1e242b;
    --mc-dirt-accent: #2c221e;
    --mc-gui-panel: #28303a;
    --mc-gui-border-top: #3e4a58;
    --mc-gui-border-bottom: #12161b;
    --mc-emerald: #10b981;
    --mc-emerald-glow: rgba(16, 185, 129, 0.4);
    --mc-gold: #f59e0b;
    --mc-diamond: #38bdf8;
    --font-pixel: 'VT323', monospace;
    --font-minecraft: 'Press Start 2P', monospace;
}

/* Background Pattern with subtle Minecraft Stone grid */
body {
    background-color: #14181d;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        radial-gradient(circle at 50% 0%, rgba(16, 185, 129, 0.12) 0%, transparent 70%);
    background-size: 32px 32px, 32px 32px, 100% 100%;
    font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
    color: #e2e8f0;
}

/* Minecraft Fonts */
.font-pixel {
    font-family: var(--font-pixel);
    letter-spacing: 1px;
}
.font-mc {
    font-family: var(--font-minecraft);
    line-height: 1.4;
}

/* Sleek Modern Minecraft Container Card (3D Inset Bevel & Glass Effect) */
.mc-card {
    background: linear-gradient(145deg, #232b35 0%, #1a2028 100%);
    border: 3px solid #334155;
    border-top-color: #475569;
    border-left-color: #475569;
    border-bottom-color: #0f172a;
    border-right-color: #0f172a;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border-radius: 12px;
}

/* Minecraft Inventory Slot (3D Sunken Box) */
.mc-slot {
    background-color: #0f141a;
    border: 3px solid #090d12;
    border-top-color: #05080b;
    border-left-color: #05080b;
    border-right-color: #263342;
    border-bottom-color: #263342;
    box-shadow: inset 2px 2px 6px rgba(0, 0, 0, 0.8);
}

/* Minecraft Bevel Button */
.mc-btn-emerald {
    background: linear-gradient(180deg, #10b981 0%, #059669 100%);
    border: 3px solid #047857;
    border-top-color: #34d399;
    border-left-color: #34d399;
    border-bottom-color: #064e3b;
    border-right-color: #064e3b;
    text-shadow: 0 2px 0 rgba(0,0,0,0.4);
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3);
}

.mc-btn-emerald:hover {
    background: linear-gradient(180deg, #34d399 0%, #10b981 100%);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5);
    transform: translateY(-1px);
}

.mc-btn-emerald:active {
    transform: translateY(1px);
    border-top-color: #064e3b;
    border-left-color: #064e3b;
    border-bottom-color: #34d399;
    border-right-color: #34d399;
}

.mc-btn-dark {
    background: linear-gradient(180deg, #334155 0%, #1e293b 100%);
    border: 3px solid #0f172a;
    border-top-color: #64748b;
    border-left-color: #64748b;
    border-bottom-color: #020617;
    border-right-color: #020617;
}

.mc-btn-dark:hover {
    background: linear-gradient(180deg, #475569 0%, #334155 100%);
}

/* Minecraft Wizard Step Tabs */
.mc-tab {
    background-color: #182029;
    border: 2px solid #334155;
    color: #94a3b8;
    transition: all 0.2s ease;
}

.mc-tab.active {
    background: linear-gradient(180deg, #065f46 0%, #047857 100%);
    border-color: #10b981;
    color: #ffffff;
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.3);
}

/* Input Fields */
.mc-input-field {
    background-color: #0f172a;
    border: 2px solid #334155;
    border-top-color: #1e293b;
    border-left-color: #1e293b;
    border-bottom-color: #475569;
    border-right-color: #475569;
    color: #ffffff;
    transition: all 0.2s ease;
}

.mc-input-field:focus {
    border-color: #10b981;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.3);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #0f172a;
}
::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #10b981;
}