:root {
    --parchment: #f4e4bc;
    --ink: #2c2c2c;
    --blood: #8a0707;
    --sidebar: #1a1a1a;
    --terminal: #00ff41;
}

body { background-color: #121212; color: var(--ink); font-family: 'IM Fell English', serif; margin: 0; display: flex; height: 100vh; overflow: hidden; }
#sidebar { width: 300px; background: var(--sidebar); color: #aaa; padding: 20px; border-right: 3px solid var(--blood); overflow-y: auto; font-family: 'Special Elite', cursive; }
#sidebar h2 { color: var(--blood); font-size: 1.1rem; border-bottom: 1px solid var(--blood); margin: 20px 0 10px 0; }
#sidebar ul { list-style: none; padding: 0; }
#sidebar li { cursor: pointer; padding: 8px 5px; border-bottom: 1px solid #333; font-size: 0.85rem; transition: 0.2s; }
#sidebar li:hover { color: white; background: #252525; }

#main { flex-grow: 1; background-color: var(--parchment); background-image: url('https://www.transparenttextures.com/patterns/paper-fibers.png'); padding: 40px 60px; overflow-y: auto; box-shadow: inset 0 0 100px rgba(0,0,0,0.3); }

#party-stats { background: rgba(0,0,0,0.9); padding: 15px; border: 1px solid var(--blood); margin-bottom: 30px; color: white; font-family: 'Special Elite'; display: flex; justify-content: space-between; align-items: center;}
#madness-status { color: var(--blood); font-weight: bold; animation: pulse 2s infinite; }

@keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.3; } 100% { opacity: 1; } }

.stat-block { background: rgba(0,0,0,0.05); border: 2px solid var(--ink); padding: 20px; margin: 25px 0; font-family: 'Special Elite'; position: relative; }
.roll-trigger { cursor: pointer; text-decoration: underline dotted var(--blood); font-weight: bold; }
.roll-trigger:hover { background: var(--blood); color: white; }

.reveal-box { border: 2px dashed var(--blood); background: rgba(138, 7, 7, 0.05); padding: 15px; margin: 20px 0; }
.reveal-content { display: none; margin-top: 10px; font-style: italic; color: #444; border-top: 1px solid rgba(138,7,7,0.2); padding-top: 10px;}

#dice-overlay { position: fixed; top: 20px; right: 20px; background: rgba(0,0,0,0.95); color: white; padding: 20px; border: 2px solid var(--blood); font-family: 'Special Elite'; display: none; z-index: 1000; text-align: center; min-width: 200px; }
button { background: var(--blood); color: white; border: none; padding: 4px 8px; cursor: pointer; font-family: 'Special Elite'; margin: 2px; }
input { background: #000; color: var(--terminal); border: 1px solid var(--blood); font-family: 'Special Elite'; text-align: center; }
#integrity-status { position: fixed; bottom: 10px; left: 10px; font-family: monospace; font-size: 10px; color: var(--terminal); z-index: 100; background: rgba(0,0,0,0.7); padding: 2px 5px;}

@media print {
    #sidebar, #party-stats, #dice-overlay, button, input { display: none !important; }
    body, #main { background: white !important; color: black !important; display: block; overflow: visible; }
    .reveal-content { display: block !important; }
}

/* Map Overlay Styles */
#map-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.9);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    cursor: zoom-out;
}

#map-overlay img {
    max-width: 90%;
    max-height: 90%;
    border: 3px solid var(--parchment);
    box-shadow: 0 0 50px rgba(0,0,0,1);
}

.map-btn {
    background: #444;
    color: var(--parchment);
    border: 1px solid var(--blood);
    padding: 10px 20px;
    margin: 20px 0;
    display: block;
    width: fit-content;
    cursor: pointer;
    font-family: 'Special Elite';
}

.map-btn:hover { background: var(--blood); }

/* Handwritten Letter Style */
.handout-letter {
    background: #fffef0;
    border: 1px solid #dcdcdc;
    padding: 30px;
    margin: 30px auto;
    max-width: 80%;
    box-shadow: 2px 5px 15px rgba(0,0,0,0.1);
    font-family: 'Dancing Script', 'Courier New', cursive; /* You can add Google Font 'Dancing Script' */
    color: #1a1a50; /* Iron gall ink blue */
    line-height: 1.5;
    position: relative;
    transform: rotate(-0.5deg); /* Slight tilt for realism */
}

.handout-letter::after {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(135deg, rgba(255,255,255,0) 95%, rgba(0,0,0,0.05) 100%);
    pointer-events: none;
}

/* style.css */
.hp-tracker input {
  width: 3.5rem;
}

@media print {
  button { display: none !important; }
  input {
    display: inline-block !important;
    background: transparent !important;
    color: black !important;
    border: 1px solid #999 !important;
  }
}

/* Add this to your Google Fonts link in index.html */
/* <link href="https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap" rel="stylesheet"> */