/* Global Reset and Font */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: #1a1a24; /* Dark, dungeon-like background */
    color: #e0e0e0;
    font-family: 'VT323', monospace; /* Pixel font */
    font-size: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.game-container {
    width: 800px;
    max-width: 90%;
    position: relative;
    padding: 20px;
}

/* JRPG Dialogue Box Styling */
.dialogue-box {
    background: linear-gradient(135deg, #000046, #1CB5E0); /* Classic Final Fantasy Blue */
    border: 4px solid #ffffff;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 30px;
    box-shadow: 5px 5px 0px rgba(0,0,0,0.5);
    min-height: 120px;
}

#speaker-name {
    color: #ffd700; /* Gold for names */
    margin-bottom: 10px;
    font-size: 28px;
    letter-spacing: 2px;
}

/* --- Medieval Guild Board Styling --- */

.quest-board-container {
    margin-top: 30px;
    width: 100%;
}

/* The Wood Planks */
.wood-backing {
    /* Creates horizontal wood planks using a repeating gradient */
    background: repeating-linear-gradient(
        to bottom,
        #3e2723,
        #3e2723 40px,
        #2d1b15 40px,
        #2d1b15 44px
    );
    padding: 15px;
    box-shadow: 10px 10px 25px rgba(0,0,0,0.8);
}

/* Heavy Iron Frame around the wood */
.iron-frame {
    border: 8px solid #2c3e50; /* Dark iron color */
    border-radius: 2px;
    padding: 30px;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.9); /* Shadows inside the frame */
}

.board-title {
    text-align: center;
    color: #f1c40f;
    font-family: 'Uncial Antiqua', cursive; /* Gothic medieval font */
    font-size: 38px;
    margin-bottom: 35px;
    text-shadow: 3px 3px 6px rgba(0,0,0,0.9);
    letter-spacing: 2px;
}

/* Grid to hold the papers */
.quests-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    justify-content: center;
}

/* Aged Parchment Papers */
.quest-paper {
    /* Subtle gradient to make the paper look textured */
    background: linear-gradient(135deg, #f4e4bc 0%, #e6ce9a 100%);
    color: #3e2723;
    text-decoration: none;
    width: 220px;
    padding: 35px 15px 20px 15px;
    position: relative;
    /* The inset shadow creates a "burnt/aged edge" look */
    box-shadow: inset 0 0 15px rgba(139, 69, 19, 0.4), 4px 4px 12px rgba(0,0,0,0.6);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-radius: 2px 5px 3px 4px; /* Slightly irregular corners */
}

.quest-paper:hover {
    transform: scale(1.08) translateY(-5px) !important;
    box-shadow: 10px 15px 25px rgba(0,0,0,0.7);
    z-index: 10;
}

/* 3D Red Wax Seals */
.wax-seal {
    width: 35px;
    height: 35px;
    background: radial-gradient(circle at 30% 30%, #c0392b, #8b0000);
    border-radius: 50%;
    position: absolute;
    top: -15px;
    color: #ffcccc;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: inset -3px -3px 6px rgba(0,0,0,0.6), 2px 2px 4px rgba(0,0,0,0.5);
    border: 1px solid #5a0000;
}

/* Text Styling */
.quest-type {
    color: #8b0000;
    font-family: 'Uncial Antiqua', cursive; 
    font-size: 24px;
    margin-top: 5px;
    margin-bottom: 5px;
    border-bottom: 2px solid #8b4513;
    width: 100%;
}

.quest-rank {
    color: #d35400;
    font-size: 18px;
    margin-bottom: 10px;
    letter-spacing: 2px;
}

.quest-desc {
    font-size: 20px;
    flex-grow: 1;
    font-weight: bold;
}

.reward {
    margin-top: 15px;
    font-size: 18px;
    color: #27ae60;
    font-weight: bold;
    background-color: rgba(255,255,255,0.4);
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px dashed #795548;
}

/* Messy placements */
.paper-1 { transform: rotate(-3deg); }
.paper-2 { transform: rotate(2deg); margin-top: 15px; }
.paper-3 { transform: rotate(-1deg); }

/* Dragon Pet Styling */
#dragon-pet {
    font-size: 80px; /* Using an emoji for now, we can swap to an image later */
    text-align: center;
    cursor: pointer;
    margin-bottom: 20px;
    transition: transform 0.2s;
}

#dragon-pet:hover {
    transform: scale(1.1); /* Slight grow effect when hovered */
}

/* --- Tavern & Canteen Styling --- */

.tavern-container {
    margin-top: 40px;
    background: linear-gradient(180deg, #2b0f0f 0%, #1a0a0a 100%);
    border: 4px solid #5c2018;
    border-radius: 8px;
    padding: 25px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.8), inset 0 0 30px rgba(255, 69, 0, 0.1); /* Subtle fire glow inside */
}

.tavern-title {
    color: #ff9800; /* Warm fire color */
    font-family: 'Uncial Antiqua', cursive;
    text-align: center;
    font-size: 34px;
    margin-bottom: 25px;
    border-bottom: 2px dashed #ff5722;
    padding-bottom: 10px;
}

/* Flexbox to put food on the left, music on the right */
.tavern-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.canteen-menu {
    flex: 2; /* Takes up more space */
    min-width: 300px;
}

.bard-corner {
    flex: 1; /* Takes up less space */
    min-width: 250px;
}

.section-heading {
    color: #ffcc80;
    font-size: 26px;
    margin-bottom: 15px;
    text-shadow: 1px 1px 2px black;
}

/* Food Blog Posts */
.food-item {
    display: flex;
    background-color: rgba(0, 0, 0, 0.4);
    border: 2px solid #3e2723;
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 6px;
    transition: background-color 0.2s;
}

.food-item:hover {
    background-color: rgba(62, 39, 35, 0.6); /* Highlights when hovered */
}

.food-icon {
    font-size: 50px;
    margin-right: 15px;
    display: flex;
    align-items: center;
}

.food-name {
    color: #e57373;
    font-size: 24px;
    margin-bottom: 5px;
}

.food-desc {
    font-size: 18px;
    color: #bdbdbd;
    margin-bottom: 10px;
    line-height: 1.2;
}

.food-buff {
    color: #69f0ae; /* Healing green */
    font-weight: bold;
    font-size: 16px;
    background-color: rgba(0,0,0,0.5);
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid #1b5e20;
}

/* Jukebox / Music Player */
.jukebox {
    background: linear-gradient(135deg, #4e342e, #3e2723);
    border: 4px solid #ffb300;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.6);
}

.track-screen {
    background-color: #000;
    border: 3px inset #555;
    padding: 10px;
    margin-bottom: 15px;
    color: #64ffda; /* Retro terminal green/cyan */
    font-family: 'VT323', monospace;
}

.now-playing {
    display: block;
    color: #ff5252;
    font-size: 18px;
    margin-bottom: 5px;
}

.track-title {
    font-size: 22px;
}

/* RPG Buttons */
.rpg-btn {
    background-color: #2e7d32;
    color: white;
    font-family: 'VT323', monospace;
    font-size: 20px;
    border: 2px solid #81c784;
    padding: 8px 15px;
    cursor: pointer;
    border-radius: 4px;
    margin: 0 5px;
    transition: transform 0.1s, background-color 0.2s;
}

.rpg-btn:hover {
    background-color: #388e3c;
}

.rpg-btn:active {
    transform: scale(0.95); /* Button presses down */
}

#pause-btn {
    background-color: #c62828;
    border-color: #ef5350;
}
#pause-btn:hover {
    background-color: #d32f2f;
}