* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Courier New', monospace;
    background: #2a1810;
    color: #f4e8d0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    padding: 20px;
}

/* ===== TITLE SCREEN ===== */

.title-screen {
    max-width: 800px;
    width: 100%;
    background: #3d2817;
    border: 4px solid #6b4423;
    border-radius: 8px;
    padding: 40px 30px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.5);
    animation: fadeIn 1s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeOut {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-20px); }
}

.title-content { text-align: center; }

.title-main {
    color: #ffd700;
    font-size: 2.5em;
    margin-bottom: 10px;
    text-shadow: 3px 3px 6px rgba(0,0,0,0.7);
    animation: titlePulse 2s ease-in-out infinite;
}

@keyframes titlePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

.title-subtitle {
    font-size: 1.3em;
    color: #d4af37;
    margin-bottom: 30px;
    font-style: italic;
}

.title-description {
    background: #2a1810;
    padding: 20px;
    border-radius: 5px;
    border: 2px solid #6b4423;
    margin-bottom: 30px;
    line-height: 1.6;
}

.title-description p { margin-bottom: 10px; }
.title-description p:last-child { margin-bottom: 0; }

.title-info-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 30px;
}

.info-card {
    background: #2a1810;
    padding: 20px;
    border-radius: 5px;
    border: 2px solid #6b4423;
}

.info-icon { font-size: 2.5em; margin-bottom: 10px; }

.info-title {
    color: #ffd700;
    font-weight: bold;
    margin-bottom: 8px;
    font-size: 1.1em;
}

.info-text {
    color: #f4e8d0;
    font-size: 0.95em;
    line-height: 1.4;
}

.title-starting-supplies {
    background: #1a0f08;
    padding: 20px;
    border-radius: 5px;
    border: 2px solid #d4af37;
    margin-bottom: 30px;
}

.supplies-title {
    color: #ffd700;
    font-weight: bold;
    font-size: 1.2em;
    margin-bottom: 15px;
}

.supplies-list {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 15px;
}

.supplies-list span {
    color: #f4e8d0;
    font-size: 1.1em;
    padding: 8px 15px;
    background: #2a1810;
    border-radius: 5px;
    border: 1px solid #6b4423;
}

.start-button {
    background: linear-gradient(135deg, #d4af37, #ffd700);
    color: #2a1810;
    border: 3px solid #b8941f;
    padding: 18px 40px;
    font-size: 1.4em;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
    animation: buttonGlow 2s ease-in-out infinite;
}

@keyframes buttonGlow {
    0%, 100% { box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4); }
    50% { box-shadow: 0 6px 25px rgba(255, 215, 0, 0.6); }
}

.start-button:hover {
    background: linear-gradient(135deg, #ffd700, #ffed4e);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.6);
}

.start-button:active { transform: translateY(-1px); }

.title-footer {
    margin-top: 25px;
    color: #8b7355;
    font-size: 0.9em;
    font-style: italic;
}

/* ===== OUTFITTER SCREEN ===== */

.outfitter-screen {
    max-width: 800px;
    width: 100%;
    background: #3d2817;
    border: 4px solid #6b4423;
    border-radius: 8px;
    padding: 30px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.5);
}

.outfitter-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.outfitter-header { text-align: center; }

.outfitter-title {
    color: #ffd700;
    font-size: 1.8em;
    margin-bottom: 5px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.outfitter-subtitle {
    color: #d4af37;
    font-size: 1em;
    font-style: italic;
    margin-bottom: 15px;
}

.outfitter-welcome {
    background: #2a1810;
    padding: 15px 20px;
    border-radius: 5px;
    border: 2px solid #6b4423;
    line-height: 1.6;
    font-style: italic;
    color: #d4c4a0;
}

.outfitter-budget {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    background: #1a0f08;
    padding: 15px;
    border-radius: 5px;
    border: 2px solid #d4af37;
}

.budget-label {
    color: #ffd700;
    font-size: 1.2em;
    font-weight: bold;
}

.budget-amount {
    font-size: 1.8em;
    font-weight: bold;
    color: #51cf66;
    transition: color 0.3s;
}

.outfitter-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.shop-item {
    display: flex;
    align-items: center;
    gap: 15px;
    background: #2a1810;
    padding: 15px;
    border-radius: 5px;
    border: 2px solid #6b4423;
    transition: border-color 0.2s, background 0.2s;
}

.shop-item:hover {
    border-color: #8b5a3c;
    background: #332012;
}

.shop-item-icon {
    font-size: 2.2em;
    min-width: 50px;
    text-align: center;
}

.shop-item-details { flex: 1; }

.shop-item-name {
    color: #ffd700;
    font-weight: bold;
    font-size: 1.1em;
    margin-bottom: 3px;
}

.shop-item-desc {
    color: #b8a88a;
    font-size: 0.85em;
    line-height: 1.4;
    margin-bottom: 4px;
}

.shop-item-price {
    color: #51cf66;
    font-weight: bold;
    font-size: 0.95em;
}

.shop-item-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.qty-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #6b4423;
    color: #f4e8d0;
    border: 2px solid #8b5a3c;
    font-size: 1.3em;
    font-family: 'Courier New', monospace;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.15s;
    line-height: 1;
}

.qty-btn:hover {
    background: #8b5a3c;
    transform: scale(1.1);
}

.qty-btn:active { transform: scale(0.95); }

.qty-display {
    font-size: 1.4em;
    font-weight: bold;
    color: #ffd700;
    min-width: 30px;
    text-align: center;
}

.cart-summary {
    background: #1a0f08;
    padding: 15px;
    border-radius: 5px;
    border: 2px solid #6b4423;
}

.cart-title {
    color: #ffd700;
    font-weight: bold;
    font-size: 1.1em;
    margin-bottom: 10px;
}

.cart-items {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.cart-item {
    background: #2a1810;
    padding: 6px 12px;
    border-radius: 4px;
    border: 1px solid #6b4423;
    font-size: 0.95em;
}

.cart-empty {
    color: #8b7355;
    font-style: italic;
}

.outfitter-warning {
    padding: 12px 15px;
    border-radius: 5px;
    text-align: center;
    font-weight: bold;
}

.warning-critical {
    background: rgba(255, 107, 107, 0.15);
    border: 2px solid #ff6b6b;
    color: #ff6b6b;
}

.warning-caution {
    background: rgba(255, 169, 77, 0.15);
    border: 2px solid #ffa94d;
    color: #ffa94d;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-8px); }
    40% { transform: translateX(8px); }
    60% { transform: translateX(-5px); }
    80% { transform: translateX(5px); }
}

.outfitter-buttons {
    display: flex;
    justify-content: center;
}

.outfitter-btn-depart {
    background: linear-gradient(135deg, #d4af37, #ffd700);
    color: #2a1810;
    border: 3px solid #b8941f;
    padding: 16px 35px;
    font-size: 1.3em;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
}

.outfitter-btn-depart:hover {
    background: linear-gradient(135deg, #ffd700, #ffed4e);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.6);
}

.outfitter-btn-depart:active { transform: translateY(-1px); }

.outfitter-tip {
    background: #2a1810;
    padding: 12px 15px;
    border-radius: 5px;
    border: 1px dashed #6b4423;
    font-size: 0.9em;
    color: #b8a88a;
    line-height: 1.5;
    text-align: center;
}

.outfitter-tip strong { color: #ffd700; }

/* ===== GAME CONTAINER ===== */

.game-container {
    max-width: 750px;
    width: 100%;
    background: #3d2817;
    border: 4px solid #6b4423;
    border-radius: 8px;
    padding: 5px 25px 25px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.5);
}

.game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-top: 0;
}

.game-header h1 {
    text-align: center;
    color: #ffd700;
    margin-bottom: 0;
    font-size: 1.6em;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    flex: 1;
}

.day-display {
    background: #1a0f08;
    padding: 6px 14px;
    border-radius: 4px;
    border: 1px solid #6b4423;
    color: #d4af37;
    font-weight: bold;
    font-size: 0.95em;
    white-space: nowrap;
}

h1 {
    text-align: center;
    color: #ffd700;
    margin-bottom: 20px;
    font-size: 2em;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

/* ===== TRAVEL ACTION BUTTONS ===== */

.action-btn-travel {
    background: #2a4a2a;
    border: 1px solid #4a8a4a;
    color: #7acf7a;
    font-weight: bold;
    animation: travelPulse 2s ease-in-out infinite;
}

.action-btn-travel:hover {
    background: #3a5a3a;
    color: #a0efa0;
}

.begin-travel-hint {
    color: #8b7355;
    font-size: 0.85em;
    text-align: center;
    font-style: italic;
    padding: 4px 8px;
    opacity: 0;
    animation: hintFadeIn 0.4s ease-in 0.3s forwards;
}

@keyframes hintFadeIn {
    to { opacity: 1; }
}

.action-btn-stop {
    background: #4a1a1a;
    border: 1px solid #8a4a4a;
    color: #cf7a7a;
    font-weight: bold;
}

.action-btn-stop:hover {
    background: #5a2a2a;
    color: #efa0a0;
}

@keyframes travelPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.75; }
}

/* ===== GAME BODY (Stats + Log side by side) ===== */

.game-body {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 15px;
}

/* ===== SUPPLIES PANEL (shown in check supplies menu) ===== */

.supplies-panel {
    background: #2a1810;
    border: 2px solid #6b4423;
    border-radius: 5px;
    padding: 10px 14px;
    width: 100%;
}

.supplies-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 20px;
}

.supply-item {
    display: flex;
    justify-content: space-between;
    font-size: 0.9em;
    gap: 8px;
}

.supply-label {
    color: #ffd700;
    font-size: 0.85em;
}

.supply-value {
    color: #f4e8d0;
}

.stopped-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    width: 100%;
}

/* ===== TRAVEL LOG ===== */

.travel-log-container {
    display: flex;
    flex-direction: column;
    background: #1a0f08;
    border: 2px solid #6b4423;
    border-radius: 5px;
    overflow: hidden;
}

.travel-log-header {
    background: #2a1810;
    padding: 8px 12px;
    color: #d4af37;
    font-weight: bold;
    font-size: 0.9em;
    border-bottom: 1px solid #6b4423;
    letter-spacing: 1px;
}

.travel-log {
    height: 260px;
    overflow-y: auto;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    scroll-behavior: smooth;
}

.travel-log::-webkit-scrollbar {
    width: 6px;
}

.travel-log::-webkit-scrollbar-track {
    background: #1a0f08;
}

.travel-log::-webkit-scrollbar-thumb {
    background: #6b4423;
    border-radius: 3px;
}

.travel-log::-webkit-scrollbar-thumb:hover {
    background: #8b5a3c;
}

.log-entry {
    display: flex;
    gap: 10px;
    font-size: 0.85em;
    line-height: 1.5;
    padding: 3px 0;
    border-bottom: 1px solid rgba(107, 68, 35, 0.2);
}

.log-entry:last-child {
    border-bottom: none;
}

.log-day {
    color: #8b7355;
    font-size: 0.8em;
    min-width: 42px;
    flex-shrink: 0;
    padding-top: 1px;
}

.log-text {
    color: #d4c4a0;
}

/* Log entry type colors */
.log-travel .log-text { color: #a09880; }
.log-event .log-text { color: #d4c4a0; }
.log-landmark .log-text { color: #ffd700; font-weight: bold; }
.log-landmark .log-day { color: #d4af37; }
.log-danger .log-text { color: #ff6b6b; }
.log-health .log-text { color: #ffa94d; }
.log-victory .log-text { color: #51cf66; font-weight: bold; }
.log-system .log-text { color: #8ba8c8; font-style: italic; }
.log-system .log-day { color: #6a8aaa; }
.log-encounter .log-text { color: #c8b078; }
.log-warning .log-text { color: #ffa94d; }

/* ===== LANDMARK INDICATOR ===== */

.landmark-indicator {
    background: #1a0f08;
    padding: 8px 10px;
    border-radius: 5px;
    margin-bottom: 12px;
    border: 2px solid #ffd700;
    text-align: center;
    font-weight: bold;
    color: #ffd700;
    font-size: 0.95em;
}

/* ===== FORT SHOP: WAGON STOCK LABEL ===== */
.wagon-stock {
    display: block;
    font-size: 0.78em;
    color: #ffffff;
    font-style: italic;
    margin-top: 3px;
    letter-spacing: 0.5px;
}

/* ===== MESSAGE BOX (encounter prompts) ===== */

.message-box {
    background: #1a0f08;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 12px;
    border: 2px solid #d4af37;
    line-height: 1.6;
    white-space: pre-line;
    font-size: 0.95em;
}

.message-box:empty { display: none; }

/* ===== BUTTONS ===== */

.buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 46px;
}

button {
    background: #6b4423;
    color: #f4e8d0;
    border: 2px solid #8b5a3c;
    padding: 10px 16px;
    font-size: 1em;
    font-family: 'Courier New', monospace;
    cursor: pointer;
    border-radius: 5px;
    transition: all 0.2s;
}

button:hover {
    background: #8b5a3c;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

button:disabled {
    background: #4a3020;
    cursor: not-allowed;
    opacity: 0.6;
}

button:disabled:hover {
    transform: none;
    box-shadow: none;
}

.action-btn {
    background: #3a4a30;
    border-color: #5a7a4a;
}

.action-btn:hover {
    background: #4a5a3a;
}

.choice-button { background: #4a6fa5; border-color: #6b8fc9; }
.choice-button:hover { background: #5a7fb5; }

.game-over { text-align: center; font-size: 1.3em; color: #ff6b6b; border-color: #ff6b6b; }
.victory { text-align: center; font-size: 1.3em; color: #51cf66; border-color: #51cf66; }

/* ===== PROGRESS BAR ===== */

.progress-section {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    margin-top: 36px;
}

.progress-section .progress-bar {
    flex: 1;
    margin-bottom: 0;
    margin-top: 0;
}

.map-button-inline {
    background: linear-gradient(135deg, #6b4423, #8b5a3c);
    color: #f4e8d0;
    border: 2px solid #8b5a3c;
    padding: 0 14px;
    font-size: 0.85em;
    font-family: 'Courier New', monospace;
    cursor: pointer;
    border-radius: 5px;
    transition: all 0.2s;
    white-space: nowrap;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.map-button-inline:hover {
    background: linear-gradient(135deg, #8b5a3c, #a06a4c);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.progress-bar {
    background: #1a0f08;
    height: 22px;
    border-radius: 5px;
    overflow: visible;
    margin-bottom: 36px;
    margin-top: 0;
    border: 2px solid #6b4423;
    position: relative;
}

.progress-fill {
    background: linear-gradient(90deg, #6b4423, #8b5a3c);
    height: 100%;
    transition: width 0.5s;
    position: absolute;
    left: 0;
    top: 0;
}

.landmark-marker {
    position: absolute;
    top: -8px;
    width: 2px;
    height: 35px;
    z-index: 2;
    transform: translateX(-50%);
    border-left: 2px dotted rgba(212, 175, 55, 0.4);
    background: none;
}

.marker-fort { border-left-color: rgba(212, 175, 55, 0.5); }
.marker-river { border-left-color: rgba(74, 144, 226, 0.5); }

.marker-icon {
    position: absolute;
    top: -28px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 18px;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
}

.progress-label {
    position: absolute;
    width: 100%;
    top: 100%;
    padding-top: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85em;
    font-weight: bold;
    color: #f4e8d0;
    z-index: 1;
}

.river-crossing { background: #1e3a5f; border-color: #4a90e2; }
.fort-stop { background: #5f4a1e; border-color: #d4af37; }
.landmark-choice { background: #2c4a6b; border-color: #4a90e2; }

/* ===== BRANCH POINT STYLES ===== */

.branch-point { 
    background: linear-gradient(135deg, #4a2c5f, #2c1a3f); 
    border-color: #9b59b6; 
    animation: branchPulse 2s ease-in-out infinite;
}

@keyframes branchPulse {
    0%, 100% { box-shadow: 0 0 5px rgba(155, 89, 182, 0.3); }
    50% { box-shadow: 0 0 15px rgba(155, 89, 182, 0.6); }
}

.desert-crossing {
    background: linear-gradient(135deg, #8b6914, #5c4a0a);
    border-color: #d4a017;
}

.marker-branch {
    border-left-color: rgba(155, 89, 182, 0.6);
}

.branch-prompt {
    text-align: center;
}

.branch-title {
    font-size: 1.2em;
    color: #d4af37;
    margin-bottom: 10px;
    font-weight: bold;
}

.branch-description {
    color: #d4c4a0;
    line-height: 1.6;
    margin-bottom: 15px;
    font-style: italic;
}

.branch-options-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 15px;
}

.branch-option-preview {
    background: rgba(0, 0, 0, 0.3);
    padding: 10px 15px;
    border-radius: 5px;
    text-align: left;
    border-left: 3px solid #6b4423;
}

.branch-option-preview:hover {
    border-left-color: #d4af37;
    background: rgba(0, 0, 0, 0.4);
}

.branch-option-desc {
    font-size: 0.9em;
    color: #a09880;
}

.branch-choice {
    background: linear-gradient(135deg, #4a2c5f, #3a1c4f);
    border-color: #7b4b9b;
    transition: all 0.3s ease;
}

.branch-choice:hover:not(:disabled) {
    background: linear-gradient(135deg, #5a3c6f, #4a2c5f);
    border-color: #9b59b6;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(155, 89, 182, 0.3);
}

.branch-choice:disabled {
    background: #3a2a3a;
    border-color: #4a3a4a;
    color: #6a5a6a;
    cursor: not-allowed;
}

/* Desert Styles */

.desert-warning {
    text-align: center;
}

.desert-title {
    font-size: 1.3em;
    color: #d4a017;
    margin-bottom: 10px;
    font-weight: bold;
}

.desert-description {
    color: #d4c4a0;
    line-height: 1.6;
    font-style: italic;
}

/* Route indicator in header */
.route-indicator {
    font-size: 0.8em;
    color: #9b59b6;
    text-align: center;
    margin-top: 5px;
    font-style: italic;
}

/* Supplies panel styles */
.supplies-panel {
    background: #1a0f08;
    border: 2px solid #6b4423;
    border-radius: 5px;
    padding: 12px;
    margin-bottom: 10px;
    width: 100%;
}

.supplies-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.supply-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.supply-label {
    font-size: 0.75em;
    color: #8b7355;
    text-transform: uppercase;
}

.supply-value {
    font-size: 0.95em;
    color: #f4e8d0;
    font-weight: bold;
}

.stopped-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

@media (max-width: 500px) {
    .supplies-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---- Flip Animation Container ---- */

.flip-container { perspective: 1000px; width: 100%; }

.flip-inner {
    position: relative;
    width: 100%;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

.flip-inner.flipped { transform: rotateY(180deg); }

.main-game-content,
.hunting-game,
.river-game {
    width: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.main-game-content { position: relative; }

.hunting-game,
.river-game {
    position: absolute;
    top: 0;
    left: 0;
    transform: rotateY(180deg);
    background: #3d2817;
    padding: 20px;
    border-radius: 8px;
}

/* ===== HUNTING MINI-GAME (Canvas-based) ===== */

#hunting-game-wrapper {
    position: relative;
    border: 4px solid #5c4a2a;
    border-radius: 4px;
    box-shadow: 0 0 20px rgba(0,0,0,0.6), inset 0 0 10px rgba(0,0,0,0.2);
    max-width: 100%;
}

#huntingCanvas {
    display: block;
    width: 100%;
    height: auto;
    cursor: none;
}

#hunting-hud {
    position: absolute;
    top: 0; left: 0; right: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 10px 16px;
    background: linear-gradient(to bottom, rgba(20,15,5,0.85), transparent);
    pointer-events: none;
    z-index: 10;
}

.hunting-hud-group {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.hunting-hud-label {
    font-family: 'Cinzel', serif;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #a08c6a;
}

.hunting-hud-value {
    font-size: 20px;
    color: #f0e6d0;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
    font-family: 'IM Fell English', serif;
}

.hunting-hud-center { text-align: center; }
.hunting-hud-right { text-align: right; }

#hunting-leave-btn {
    display: none;
    position: absolute;
    bottom: 10px;
    right: 12px;
    z-index: 10;
    pointer-events: auto;
    font-family: 'Cinzel', serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #a08c6a;
    background: rgba(20,15,5,0.75);
    border: 1px solid #5c4a2a;
    border-radius: 3px;
    padding: 4px 10px;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
}
#hunting-leave-btn:hover {
    color: #f0e6d0;
    background: rgba(92,74,42,0.85);
}

#hunting-message-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(15, 10, 3, 0.88);
    z-index: 20;
    cursor: default;
    padding: 20px;
}

#hunting-message-overlay.hidden { display: none; }

#hunting-message-overlay h1 {
    font-family: 'Cinzel', serif;
    font-size: 28px;
    color: #d4b87a;
    margin-bottom: 6px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
    text-align: center;
}

#hunting-message-overlay h2 {
    font-family: 'Cinzel', serif;
    font-size: 16px;
    color: #a08c6a;
    margin-bottom: 20px;
    font-weight: normal;
    text-align: center;
}

.hunting-results {
    font-family: 'IM Fell English', serif;
    font-size: 16px;
    line-height: 2;
    margin-bottom: 20px;
    text-align: center;
    color: #c8b89a;
}

.hunting-highlight {
    color: #e8c86a;
    font-weight: bold;
}

.hunting-carry-warning {
    color: #c47a4a;
    font-style: italic;
    font-size: 14px;
    margin-bottom: 16px;
    text-align: center;
    font-family: 'IM Fell English', serif;
}

.hunting-instructions-overlay {
    max-width: 380px;
    text-align: center;
    font-size: 14px;
    line-height: 1.7;
    color: #a09880;
    margin-bottom: 20px;
    font-family: 'IM Fell English', serif;
}

.hunting-animal-legend {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

.hunting-legend-item {
    text-align: center;
    font-size: 13px;
    color: #a09880;
    font-family: 'IM Fell English', serif;
}

.hunting-legend-item span {
    display: block;
    font-size: 11px;
    color: #7a7060;
}

.hunting-btn {
    font-family: 'Cinzel', serif;
    font-size: 14px;
    padding: 10px 30px;
    background: linear-gradient(to bottom, #5c4a2a, #3a2e18);
    color: #e8dcc8;
    border: 2px solid #7a6840;
    border-radius: 3px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: all 0.2s;
    margin: 6px;
}

.hunting-btn:hover {
    background: linear-gradient(to bottom, #7a6840, #5c4a2a);
    border-color: #a08c6a;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

/* ===== RIVER CROSSING MINI-GAME (Canvas-based) ===== */

.river-info {
    text-align: center;
    margin-bottom: 10px;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    font-size: 0.95em;
}

.river-info-label { color: #ffd700; font-weight: bold; }

#river-game-wrapper {
    position: relative;
    border: 4px solid #2a5a8a;
    border-radius: 4px;
    box-shadow: 0 0 20px rgba(0,0,0,0.6), inset 0 0 10px rgba(0,0,0,0.2);
    max-width: 100%;
}

#riverCanvas {
    display: block;
    width: 100%;
    height: auto;
}

#riverOverlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(15, 10, 3, 0.88);
    z-index: 20;
    padding: 20px;
}

#riverOverlay.hidden { display: none; }

#riverOverlay h1 {
    font-family: 'Cinzel', serif;
    font-size: 26px;
    color: #4a90e2;
    margin-bottom: 6px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
    text-align: center;
}

#riverOverlay h2 {
    font-family: 'Cinzel', serif;
    font-size: 15px;
    color: #a08c6a;
    margin-bottom: 18px;
    font-weight: normal;
    text-align: center;
}

.river-instructions-text {
    max-width: 380px;
    text-align: center;
    font-size: 14px;
    line-height: 1.8;
    color: #a09880;
    margin-bottom: 22px;
    font-family: 'IM Fell English', serif;
}

.river-instructions-text strong {
    color: #f0e6d0;
}

/* ===== TRAIL MAP MODAL ===== */

.trail-map-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    animation: fadeIn 0.3s ease-out;
}

.trail-map-modal {
    background: #3d2817;
    border: 4px solid #6b4423;
    border-radius: 12px;
    max-width: 900px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}

.trail-map-header {
    position: relative;
    text-align: center;
    padding: 20px 50px;
    background: linear-gradient(to bottom, #4a3020, #3d2817);
    border-bottom: 2px solid #6b4423;
}

.trail-map-header h2 {
    color: #ffd700;
    font-size: 1.6em;
    margin-bottom: 5px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.trail-map-subtitle {
    color: #d4af37;
    font-style: italic;
    font-size: 0.95em;
}

.trail-map-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #6b4423;
    border: 2px solid #8b5a3c;
    color: #f4e8d0;
    font-size: 1.2em;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.trail-map-close:hover {
    background: #8b5a3c;
    transform: scale(1.1);
}

.trail-map-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    padding: 12px 20px;
    background: #2a1810;
    border-bottom: 1px solid #6b4423;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.85em;
    color: #b8a88a;
}

.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.legend-dot.visited { background: #51cf66; }
.legend-dot.current { background: #ffd700; box-shadow: 0 0 8px #ffd700; }
.legend-dot.upcoming { background: #666; }

.legend-icon {
    font-size: 1.1em;
}

.trail-map-container {
    padding: 20px;
    overflow-x: auto;
}

.trail-map-content {
    min-width: 800px;
    position: relative;
}

/* Main Trail Line */
.trail-line {
    position: absolute;
    height: 4px;
    background: linear-gradient(90deg, #51cf66, #666);
    border-radius: 2px;
    top: 50%;
    transform: translateY(-50%);
}

/* Branch Container */
.trail-branch-section {
    position: relative;
    margin: 30px 0;
    padding: 20px 0;
}

.trail-main-path {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    position: relative;
    padding: 20px 0;
}

/* Landmark Nodes */
.trail-node {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.trail-node-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #666;
    border: 3px solid #4a3a2a;
    position: relative;
    z-index: 2;
    transition: all 0.3s;
}

.trail-node.visited .trail-node-dot {
    background: #51cf66;
    border-color: #3d9e4e;
}

.trail-node.current .trail-node-dot {
    background: #ffd700;
    border-color: #b8941f;
    box-shadow: 0 0 12px #ffd700;
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { box-shadow: 0 0 8px #ffd700; }
    50% { box-shadow: 0 0 20px #ffd700; }
}

.trail-node-icon {
    font-size: 1.3em;
    margin-bottom: 5px;
}

.trail-node-name {
    font-size: 0.75em;
    text-align: center;
    color: #b8a88a;
    max-width: 80px;
    line-height: 1.2;
    margin-top: 5px;
}

.trail-node.visited .trail-node-name {
    color: #51cf66;
}

.trail-node.current .trail-node-name {
    color: #ffd700;
    font-weight: bold;
}

.trail-node-distance {
    font-size: 0.65em;
    color: #8b7355;
    margin-top: 2px;
}

/* Branch Point Styling */
.branch-point {
    position: relative;
    margin: 40px 0;
    padding: 15px;
    background: #2a1810;
    border: 2px solid #9b59b6;
    border-radius: 8px;
}

.branch-point-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #6b4423;
}

.branch-point-icon {
    font-size: 1.5em;
}

.branch-point-title {
    color: #9b59b6;
    font-weight: bold;
    font-size: 1.1em;
}

.branch-point-status {
    margin-left: auto;
    font-size: 0.85em;
    padding: 3px 10px;
    border-radius: 12px;
}

.branch-point-status.decided {
    background: rgba(81, 207, 102, 0.2);
    color: #51cf66;
    border: 1px solid #51cf66;
}

.branch-point-status.upcoming {
    background: rgba(155, 89, 182, 0.2);
    color: #9b59b6;
    border: 1px solid #9b59b6;
}

.branch-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.branch-option {
    background: #1a0f08;
    border: 2px solid #6b4423;
    border-radius: 8px;
    padding: 12px;
    transition: all 0.2s;
}

.branch-option.selected {
    border-color: #51cf66;
    background: rgba(81, 207, 102, 0.1);
}

.branch-option.not-selected {
    opacity: 0.5;
}

.branch-option-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.branch-option-name {
    color: #ffd700;
    font-weight: bold;
    font-size: 0.95em;
}

.branch-option-badge {
    font-size: 0.7em;
    padding: 2px 6px;
    border-radius: 8px;
    margin-left: auto;
}

.branch-option-badge.easy {
    background: rgba(81, 207, 102, 0.2);
    color: #51cf66;
}

.branch-option-badge.normal {
    background: rgba(255, 215, 0, 0.2);
    color: #ffd700;
}

.branch-option-badge.hard {
    background: rgba(255, 107, 107, 0.2);
    color: #ff6b6b;
}

.branch-option-badge.very_hard {
    background: rgba(204, 51, 51, 0.2);
    color: #cc3333;
}

.branch-option-desc {
    font-size: 0.8em;
    color: #b8a88a;
    line-height: 1.4;
    margin-bottom: 8px;
}

.branch-option-landmarks {
    font-size: 0.75em;
    color: #8b7355;
}

.branch-option-landmarks span {
    display: inline-block;
    background: #2a1810;
    padding: 2px 6px;
    border-radius: 4px;
    margin: 2px 3px 2px 0;
}

/* Trail Segment Lines */
.trail-segment {
    height: 4px;
    background: #4a3a2a;
    flex-grow: 1;
    min-width: 30px;
    max-width: 80px;
    position: relative;
}

.trail-segment.visited {
    background: linear-gradient(90deg, #51cf66, #3d9e4e);
}

.trail-segment.current {
    background: linear-gradient(90deg, #51cf66, #ffd700);
}

/* Progress Bar in Map */
.trail-map-progress {
    padding: 15px 20px;
    background: #2a1810;
    border-top: 2px solid #6b4423;
}

.map-progress-bar {
    height: 12px;
    background: #1a0f08;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 8px;
}

.map-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #51cf66, #3d9e4e);
    border-radius: 6px;
    transition: width 0.5s ease;
}

.map-progress-text {
    text-align: center;
    font-size: 0.9em;
    color: #d4af37;
}

/* Map Button in Header */
.header-controls {
    display: flex;
    align-items: center;
    gap: 15px;
    justify-content: center;
}

.map-button {
    background: linear-gradient(135deg, #6b4423, #8b5a3c);
    color: #f4e8d0;
    border: 2px solid #8b5a3c;
    padding: 6px 14px;
    font-size: 0.9em;
    font-family: 'Courier New', monospace;
    cursor: pointer;
    border-radius: 5px;
    transition: all 0.2s;
}

.map-button:hover {
    background: linear-gradient(135deg, #8b5a3c, #a06a4c);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/* Trail Rows for Visual Layout */
.trail-row {
    display: flex;
    align-items: center;
    padding: 10px 0;
    position: relative;
}

.trail-row::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 3px;
    background: #4a3a2a;
    z-index: 0;
}

.trail-row.row-visited::before {
    background: linear-gradient(90deg, #51cf66 var(--visited-percent, 0%), #4a3a2a var(--visited-percent, 0%));
}

/* ===== RESPONSIVE ===== */

@media (max-width: 650px) {
    .travel-log {
        height: 200px;
    }

    .game-header h1 {
        font-size: 1.2em;
    }

    .trail-map-modal {
        max-height: 95vh;
    }

    .trail-map-header {
        padding: 15px 40px 15px 15px;
    }

    .trail-map-header h2 {
        font-size: 1.2em;
    }

    .branch-options {
        grid-template-columns: 1fr;
    }

    .header-controls {
        flex-direction: column;
        gap: 5px;
    }

    .map-button {
        font-size: 0.8em;
        padding: 4px 10px;
    }
}