/* door.quest — app.css */
/* All colors via CSS variables for easy theme swapping */

:root {
    --dq-bg:          #f8f9fa;
    --dq-surface:     #ffffff;
    --dq-border:      #dee2e6;
    --dq-text:        #212529;
    --dq-muted:       #6c757d;
    --dq-primary:     #2563eb;
    --dq-primary-rgb: 37, 99, 235;
    --dq-accent:      #7c3aed;
    --dq-door:        #3d2b1f;
    --dq-door-shine:  #6b4c3b;
    --dq-xp:          #22c55e;
    --dq-shadow:      0 2px 8px rgba(0,0,0,0.06);
    --dq-radius:      12px;
}

[data-bs-theme="dark"] {
    --dq-bg:       #0f172a;
    --dq-surface:  #1e293b;
    --dq-border:   #334155;
    --dq-text:     #f1f5f9;
    --dq-muted:    #94a3b8;
}

/* ── Layout ── */
body { background: var(--dq-bg); color: var(--dq-text); font-family: 'Inter', system-ui, sans-serif; }
main { min-height: 70vh; }

/* ── Navbar ── */
#main-nav {
    background: var(--dq-surface);
    border-bottom: 1px solid var(--dq-border);
    box-shadow: var(--dq-shadow);
}
.navbar-brand { color: var(--dq-primary) !important; font-size: 1.25rem; letter-spacing: -0.5px; }

/* ── XP Bar ── */
.xp-bar-outer {
    height: 3px;
    background: var(--dq-border);
    position: sticky;
    top: 56px;
    z-index: 1019;
}
.xp-bar-inner {
    height: 100%;
    background: var(--dq-xp);
    transition: width 0.8s cubic-bezier(.22,.68,0,1.2);
}

/* ── Ad Banner ── */
.ad-banner { background: var(--dq-surface); border-bottom: 1px solid var(--dq-border); }

/* ── The Door ── */
.door-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding: 3rem 1rem;
}

.door-svg-wrap {
    position: relative;
    cursor: pointer;
    user-select: none;
    transition: transform 0.1s ease;
}
.door-svg-wrap:active { transform: scale(0.97); }

.door-svg {
    width: min(340px, 90vw);
    filter: drop-shadow(0 8px 24px rgba(0,0,0,0.18));
    transition: filter 0.3s;
}
.door-svg-wrap:hover .door-svg {
    filter: drop-shadow(0 12px 32px rgba(37, 99, 235, 0.25));
}

/* Door shake animation on knock */
@keyframes doorShake {
    0%,100% { transform: translateX(0) rotate(0deg); }
    15%      { transform: translateX(-4px) rotate(-0.5deg); }
    30%      { transform: translateX(4px) rotate(0.5deg); }
    45%      { transform: translateX(-3px) rotate(-0.3deg); }
    60%      { transform: translateX(3px) rotate(0.3deg); }
    75%      { transform: translateX(-2px); }
    90%      { transform: translateX(2px); }
}
.door-svg-wrap.knocking { animation: doorShake 0.5s ease; }

/* Item drop pop */
@keyframes dropPop {
    0%   { transform: translateY(30px) scale(0.6); opacity: 0; }
    60%  { transform: translateY(-8px) scale(1.1); opacity: 1; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}
.drop-result { animation: dropPop 0.45s cubic-bezier(.22,.68,0,1.2) forwards; }

/* Cooldown ring */
.cooldown-ring {
    position: relative;
    width: 100px;
    height: 100px;
}
.cooldown-ring svg { transform: rotate(-90deg); }
.cooldown-ring-circle {
    stroke: var(--dq-primary);
    stroke-linecap: round;
    transition: stroke-dashoffset 1s linear;
}
#knock-btn {
    font-size: 1.1rem;
    padding: 0.75rem 2.5rem;
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: all 0.2s;
}
#knock-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* ── Cards ── */
.dq-card {
    background: var(--dq-surface);
    border: 1px solid var(--dq-border);
    border-radius: var(--dq-radius);
    box-shadow: var(--dq-shadow);
    padding: 1.5rem;
}

/* ── Inventory Grid ── */
.inventory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 1rem;
}
.inv-item {
    background: var(--dq-surface);
    border: 1px solid var(--dq-border);
    border-radius: var(--dq-radius);
    padding: 0.75rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}
.inv-item:hover { border-color: var(--dq-primary); transform: translateY(-2px); box-shadow: var(--dq-shadow); }
.inv-item img { width: 64px; height: 64px; object-fit: contain; }
.inv-item .qty-badge {
    position: absolute;
    top: 6px; right: 6px;
    background: var(--dq-primary);
    color: #fff;
    border-radius: 999px;
    font-size: 0.7rem;
    padding: 1px 6px;
    font-weight: 700;
}

/* ── Rarity colors ── */
.rarity-common    { border-color: #adb5bd !important; }
.rarity-uncommon  { border-color: #22c55e !important; }
.rarity-rare      { border-color: #3b82f6 !important; }
.rarity-epic      { border-color: #7c3aed !important; }
.rarity-legendary { border-color: #f59e0b !important; box-shadow: 0 0 12px rgba(245,158,11,0.3); }

.text-purple { color: #7c3aed !important; }
.bg-purple   { background-color: #7c3aed !important; }

/* ── Trade Cards ── */
.trade-card {
    background: var(--dq-surface);
    border: 1px solid var(--dq-border);
    border-radius: var(--dq-radius);
    padding: 1.25rem;
    transition: box-shadow 0.2s;
}
.trade-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.1); }

/* ── Leaderboard ── */
.leaderboard-row:nth-child(1) td:first-child::before { content: '🥇 '; }
.leaderboard-row:nth-child(2) td:first-child::before { content: '🥈 '; }
.leaderboard-row:nth-child(3) td:first-child::before { content: '🥉 '; }

/* ── Notification Dropdown ── */
.notification-dropdown .notif-item {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--dq-border);
    font-size: 0.875rem;
    transition: background 0.15s;
}
.notification-dropdown .notif-item:hover { background: var(--dq-bg); }
.notification-dropdown .notif-item.unread { background: rgba(var(--dq-primary-rgb), 0.06); }

/* ── Level gate notice ── */
.level-gate {
    background: linear-gradient(135deg, rgba(var(--dq-primary-rgb),0.07), rgba(var(--dq-primary-rgb),0.03));
    border: 1px dashed var(--dq-primary);
    border-radius: var(--dq-radius);
    padding: 2rem;
    text-align: center;
    color: var(--dq-muted);
}

/* ── Admin / Advertiser layouts ── */
.admin-sidebar {
    width: 220px;
    min-height: 100vh;
    background: var(--dq-surface);
    border-right: 1px solid var(--dq-border);
    padding: 1.5rem 1rem;
}
.admin-content { flex: 1; padding: 2rem; }

/* ── XP flash notification ── */
#xp-toast {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 9999;
}

/* ── Responsive ── */
@media (max-width: 576px) {
    .door-svg { width: 260px; }
    .inventory-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); }
}

/* ── Theme: Default (already above) ── */
/* Additional themes can be loaded via /css/theme-NAME.css */