:root { --primary-color: #8B4513; --secondary-color: #D2691E; --warm-orange: #CD853F; --background-color: #FFF8DC; --card-background: #FAF0E6; --border-color: #DEB887; --text-color: #5D4037; --light-text-color: #A1887F; } .story-card { background: var(--card-background); border-radius: 20px; padding: 30px; margin-bottom: 20px; box-shadow: 0 10px 40px rgba(139,69,19,0.1); border: 1px solid var(--border-color); } .scene-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 25px; padding: 20px; background: linear-gradient(135deg, #8B4513, #D2691E); border-radius: 12px; color: white; } .story-content { font-size: 1.15em; line-height: 2; text-indent: 2em; margin: 25px 0; padding: 20px; background: #FFF8DC; border-left: 5px solid var(--primary-color); border-radius: 0 10px 10px 0; border: 1px solid #DEB887; } .dialogue { margin: 15px 0; padding: 15px 20px; background: #FAF0E6; border-radius: 10px; border-left: 4px solid var(--secondary-color); text-indent: 0; border: 1px solid #DEB887; } .dialogue strong { color: var(--primary-color); } .thought { font-style: italic; color: var(--light-text-color); padding: 10px 15px; background: #F5F5DC; border-radius: 8px; margin: 10px 0; text-indent: 0; border: 1px dashed #DEB887; } .character-status { margin: 15px 0; padding: 15px; background: #FFF8DC; border-radius: 10px; border-left: 4px solid var(--primary-color); border: 1px solid #DEB887; } .progress-fill { background: linear-gradient(90deg, var(--primary-color), var(--warm-orange)); } .option-card { padding: 20px; margin: 15px 0; background: #FFF8DC; border: 2px solid var(--border-color); border-radius: 15px; cursor: pointer; transition: all 0.3s; } .option-card:hover { border-color: var(--primary-color); transform: translateX(10px); box-shadow: 0 5px 20px rgba(139,69,19,0.3); }