@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Lato:ital,wght@0,400;0,700;1,400&display=swap');

body {
    font-family: 'Lato', sans-serif;
    background-color: #0f0702;
    color: #f5d0a9;
    overflow-x: hidden
}

.font-rpg {
    font-family: 'Cinzel', serif
}

.kingdom-bg {
    background: linear-gradient(rgba(15, 7, 2, 0.8), rgba(15, 7, 2, 0.8)), url('https://images.unsplash.com/photo-1599707367072-cd6ad6cb3d50?q=80&w=2070&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
    min-height: 100vh;
    position: relative
}

.parchment-panel {
    background: #fdf6e3;
    color: #451a03;
    border: 8px solid #78350f;
    border-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"><path d="M0,0 L10,0 L0,10 Z M20,0 L30,0 L30,10 Z M0,20 L0,30 L10,30 Z M30,20 L30,30 L20,30 Z" fill="%2378350f"/></svg>') 10 stretch;
    border-radius: 2px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
    position: relative;
    padding: 30px
}

.parchment-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml;utf8,<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.5" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noise)" opacity="0.1"/></svg>');
    pointer-events: none
}

.quest-log {
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid #a16207;
    color: #fcd34d;
    padding: 15px;
    margin-bottom: 20px;
    font-family: 'Cinzel', serif
}

.portrait-frame {
    width: 120px;
    height: 120px;
    border: 4px solid #a16207;
    background: #292524;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 0 15px #a16207;
    margin: 0 auto 10px
}

.npc-portrait {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.2)
}

.input-gem {
    background: rgba(0, 0, 0, 0.2);
    border: 2px solid #78350f;
    padding: 10px;
    font-size: 1.5rem;
    font-weight: bold;
    color: #78350f;
    width: 150px;
    text-align: center;
    font-family: 'Cinzel'
}

.btn-rpg {
    background: linear-gradient(to bottom, #b45309, #78350f);
    color: #fef3c7;
    border: 2px solid #451a03;
    padding: 12px 25px;
    font-family: 'Cinzel';
    font-weight: bold;
    font-size: 1.2rem;
    cursor: pointer;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    transition: all 0.1s
}

.btn-rpg:hover {
    background: linear-gradient(to bottom, #d97706, #92400e);
    transform: scale(1.02)
}

.btn-rpg:active {
    transform: translateY(2px)
}

.stat-bar {
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid #78350f;
    padding: 5px 10px;
    border-radius: 20px
}

.gold-icon {
    color: #eab308;
    margin-right: 5px;
    font-size: 1.2rem
}