body { font-family: 'Courier New', Courier, monospace; background-color: #1a1a1a; color: #e0e0e0; margin: 0; padding: 20px; }
.container { max-width: 1100px; margin: auto; background-color: #2a2a2a; padding: 20px; border-radius: 8px; box-shadow: 0 0 15px rgba(0,0,0,0.5); }
h1, h2, h3 { color: #ffa500; border-bottom: 1px solid #ffa500; padding-bottom: 5px; }
.game-area { display: grid; grid-template-columns: 1fr; gap: 30px; }
@media (min-width: 800px) { .game-area { grid-template-columns: minmax(400px, 1.5fr) 1fr; } }
.map-wrapper { display: flex; flex-direction: column; align-items: center; }
.player-info { padding: 0 10px; overflow-y: auto; }
.map { display: grid; grid-template-columns: repeat(11, 1fr); border: 2px solid #555; width: 100%; max-width: 500px;}
.map-tile { width: 100%; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; background-color: #444; font-size: 1.2em; line-height: 1; }
.map-tile.undiscovered { background-color: #111; color: #333; }
.map-tile.out-of-bounds { background-color: #000; }
.map-tile a { text-decoration: none; color: inherit; display: flex; width: 100%; height: 100%; align-items: center; justify-content: center;}
.player-location { background-color: #ffcc00 !important; color: #111; border-radius: 50%; animation: pulse 1.5s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 204, 0, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(255, 204, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 204, 0, 0); } }

/* Terrain Colors */
.terrain-grassland, .terrain-hills { background-color: #5a6e42; }
.terrain-path { background-color: #5c4033; }
.terrain-water { background-color: #336699; }
.terrain-forest { background-color: #225a22; }
.terrain-stone_floor { background-color: #666; }
.terrain-stone_wall { background-color: #333; }
.terrain-cobblestone { background-color: #006400; } /* darkgreen */
.terrain-general_shop, .terrain-weapon_shop, .terrain-armor_shop { background-color: #a52a2a; } /* brown */

.nav-buttons { margin-top: 20px; text-align: center; }
.nav-buttons a { background: #444; color: #e0e0e0; border: 1px solid #666; padding: 10px 15px; border-radius: 4px; margin: 5px; text-decoration: none; display: inline-block; min-width: 60px; line-height: 1.2; }
.nav-buttons a:hover { background: #555; }
.nav-buttons div { display: flex; justify-content: center; align-items: center; }
.location-action a { background: #2a7a2a; border-color: #3a9a3a; padding: 15px; margin: 0 10px; }
.location-action a:hover { background: #3a9a3a; }
.messages { background: #111; border: 1px solid #444; padding: 10px; margin-top: 20px; height: 150px; overflow-y: scroll; list-style: none; font-size: 0.9em; }
.messages li { margin-bottom: 5px; word-break: break-all; }
.char-creation, .battle-screen, .game-over-screen, .stats-page { text-align: center; padding: 40px; }
input, select { background: #444; color: #e0e0e0; border: 1px solid #666; padding: 10px; border-radius: 4px; margin: 5px; font-family: inherit; }

/* Unified Button Styling */
button, .button {
    display: inline-block;
    cursor: pointer;
    background: #ffa500;
    color: #111;
    font-weight: bold;
    border: 1px solid #ffa500;
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 4px;
    margin: 5px;
    font-family: inherit;
    text-align: center;
}
button:hover, .button:hover { background: #ffc55c; }

.inventory ul { list-style: none; padding: 0; }
.inventory li { background: #333; padding: 8px; margin-bottom: 5px; border-radius: 4px; display: flex; justify-content: space-between; align-items: center; }
.battle-stats { display: flex; justify-content: space-around; flex-wrap: wrap; gap: 20px; margin: 20px 0; text-align: center; }

.stat-block { background-color: #333; padding: 15px; border-radius: 8px; min-width: 200px; }
.hp-bar, .xp-bar { background-color: #555; border-radius: 5px; overflow: hidden; border: 1px solid #888; margin-top: 5px; }
.hp-fill { background-color: #0a0; height: 20px; transition: width 0.5s ease-in-out; }
.xp-fill { background-color: #08c; height: 10px; transition: width 0.5s ease-in-out; }
.footer-actions { text-align: center; margin-top: 30px; padding-top: 20px; border-top: 1px solid #444; }
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); display: none; justify-content: center; align-items: center; z-index: 1000; }
.modal-content { background: #2a2a2a; padding: 30px; border-radius: 8px; box-shadow: 0 0 20px rgba(0,0,0,0.8); text-align: left; max-width: 500px; width: 90%; }
.modal-content h3 { margin-top: 0; }
.modal-content .close-button { float: right; cursor: pointer; font-size: 1.5em; line-height: 1; }
.dev-option { margin-bottom: 15px; }

/* Inventory Page Styles */
.inventory-page { padding: 20px; }
.inventory-container { display: grid; grid-template-columns: 1fr 2fr; gap: 30px; }
.equipment-slots { background: #1e1e1e; padding: 15px; border-radius: 8px; }
.slot { display: grid; grid-template-columns: 100px 1fr; align-items: center; margin-bottom: 10px; background: #333; padding: 5px; border-radius: 4px; }
.slot-name { font-weight: bold; color: #ccc; }
.slot-item { color: #fff; }
.unequip-btn { background: #800; border-color: #a00; color: #fff; padding: 2px 6px; font-size: 0.8em; margin-left: 10px; }
.inventory-list .item-list { list-style: none; padding: 0; max-height: 400px; overflow-y: auto; padding-right: 10px; }
.inventory-item { background: #333; padding: 10px 15px; margin-bottom: 8px; border-radius: 4px; display: flex; justify-content: space-between; align-items: center; border-left: 4px solid #ffa500; }
.inventory-item-empty { padding: 15px; text-align: center; color: #888; }
.item-info { display: flex; flex-direction: column; gap: 5px; }
.item-name { font-weight: bold; color: #fff; font-size: 1.1em; }
.item-stats { font-size: 0.9em; color: #ccc; }
.discard-btn { background: #a22; border-color: #c44; }
.inventory-footer { margin-top: 20px; text-align: center; }
.item-actions { display: flex; gap: 5px; }

/* Quick Inventory Scrollbar */
.player-info .inventory ul {
    max-height: 250px;
    overflow-y: auto;
    padding-right: 10px;
}

.player-actions {
    display: flex;
    gap: 10px;
    margin: 15px 0;
}

.player-actions .button {
    flex-grow: 1;
    text-align: center;
}

.stats-footer {
    margin-top: 20px;
    text-align: center;
    display: flex;
    gap: 10px;
    justify-content: center;
}

.quests ul {
    max-height: 200px; /* Adjust as needed */
    overflow-y: auto;
    padding-right: 10px; /* To prevent scrollbar from overlapping content */
}

.controls-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    gap: 50px;
}

.d-pad {
    display: grid;
    grid-template-columns: repeat(3, 50px);
    grid-template-rows: repeat(3, 50px);
    gap: 5px;
}

.d-pad a {
    background: #444;
    color: #e0e0e0;
    border: 1px solid #666;
    border-radius: 4px;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5em;
}

.d-pad a:hover {
    background: #555;
}

.d-pad-up { grid-column: 2; grid-row: 1; }
.d-pad-left { grid-column: 1; grid-row: 2; }
.d-pad-center { grid-column: 2; grid-row: 2; }
.d-pad-right { grid-column: 3; grid-row: 2; }
.d-pad-down { grid-column: 2; grid-row: 3; }

.context-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.context-actions a {
    background: #2a7a2a;
    border-color: #3a9a3a;
    color: #e0e0e0;
    padding: 15px;
    text-decoration: none;
    border-radius: 4px;
    text-align: center;
}

.context-actions a:hover {
    background: #3a9a3a;
}

/* Shop Styles */
.shop-interface { padding: 20px; }
.shop-container { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.shop-inventory ul, .player-inventory ul { list-style: none; padding: 0; max-height: 400px; overflow-y: auto; padding-right: 10px; }
.shop-inventory li, .player-inventory li { background: #333; padding: 8px; margin-bottom: 5px; border-radius: 4px; display: flex; justify-content: space-between; align-items: center; }
.shop-footer { margin-top: 20px; text-align: center; }

/* Dialog Styles */
.dialog-interface {
    background-color: #333;
    border: 1px solid #555;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    max-width: 600px;
    margin: 50px auto;
}

.dialog-interface h2 {
    color: #ffa500;
    margin-top: 0;
}

.dialog-text {
    font-size: 1.1em;
    margin-bottom: 20px;
}

.dialog-footer .button {
    padding: 10px 20px;
    font-size: 1em;
}