:root {
  --ink: #2c1e14; --paper: #f4e4bc; --pathfinder-red: #8b0000;
  --gold: #a67c00; --deep-bg: #1a1a1a; --book-cover: #4d331f; --magic-purple: #4b0082;
}
body { background-color: var(--deep-bg); display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; margin: 0; font-family: 'Georgia', serif; color: var(--ink); }

/* Dice Bar */
.dice-bar { width: 1000px; background: #333; padding: 10px; border-radius: 8px; display: flex; gap: 12px; align-items: center; color: white; font-size: 13px; border: 1px solid #444; margin-bottom: 10px; }
.dice-out { font-weight: bold; color: #00ff00; background: #222; padding: 6px 15px; border-radius: 4px; border: 1px solid #555; flex-grow: 1; text-align: center; font-family: monospace; }
.dice-bar select { padding: 4px; background: #444; color: white; border: 1px solid #666; border-radius: 4px; }
.dice-bar button { background-color: var(--pathfinder-red); background-image: url('../assets/images/burlap.webp') !important; background-blend-mode: multiply; color: white; border: none; padding: 5px 15px; border-radius: 4px; cursor: pointer; font-weight: bold; }

/* Book Structure */
.book-container { width: 1000px; display: flex; position: relative; }
.book { display: flex; width: 100%; height: 850px; background: var(--book-cover); padding: 15px; border-radius: 10px; box-shadow: 0 25px 50px rgba(0,0,0,0.8); position: relative; z-index: 5; }
.page { flex: 1; background: var(--paper); padding: 30px; overflow-y: auto; position: relative; z-index: 6; box-shadow: inset 0 0 50px rgba(0,0,0,0.1); border-radius: 5px; }
.left-page { border-right: 1px solid rgba(0,0,0,0.2); }

/* Tabs on Right side under cover */
.tabs-column { position: absolute; left: 100%; top: 50px; display: flex; flex-direction: column; gap: 8px; z-index: 1; }
.tab { background-color: transparent; background-image: url('../assets/images/inactive-tab.webp'); background-size: 100% 100%; color: #f4e4bc; padding: 12px 20px 12px 30px; cursor: pointer; font-size: 13px; font-weight: bold; border: none; position: relative; left: -20px; transition: 0.2s; white-space: nowrap; text-shadow: 1px 1px 2px black; }
.tab.active { background-image: url('../assets/images/active-tab.webp'); left: -5px; color: white; }

/* UI Elements */
h2 { font-variant: small-caps; border-bottom: 2px solid var(--ink); color: var(--pathfinder-red); margin-top: 0; }
h3 { font-size: 1em; color: var(--pathfinder-red); margin-bottom: 5px; }
.controls-box { background: rgba(0,0,0,0.05); padding: 12px; border-radius: 6px; border: 1px solid rgba(0,0,0,0.1); margin-bottom: 15px; }
.action-btn { width: 100%; padding: 10px; margin: 4px 0; font-weight: bold; cursor: pointer; background-color: #eaddca; background-image: url('../assets/images/burlap.webp') !important; background-blend-mode: multiply; border: 1px solid #998; border-radius: 4px; }
.loot-item { margin: 8px 0; padding-bottom: 5px; border-bottom: 1px dashed rgba(0,0,0,0.2); font-size: 0.9em; }
.magic { color: var(--magic-purple); font-weight: bold; }
label { font-size: 0.8em; font-weight: bold; display: block; margin-top: 5px; }
select { width: 100%; padding: 5px; margin-bottom: 5px; }

/* Text Output Dividers */
.output-block:not(:empty) { margin-bottom: 20px; }
.output-block:not(:empty)::before,
.output-block:not(:empty)::after {
  content: "";
  display: block;
  width: 100%;
  height: 14px;
  background-image: url('../assets/images/wood-bar.webp');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.output-block:not(:empty)::before { margin-bottom: 12px; }
.output-block:not(:empty)::after { margin-top: 12px; }