:root {
  --primary: #2e7d32;
  --secondary: #f57f17;
  --bg-color: #f1f8e9;
  --card-bg: #ffffff;
  --grid-line: #cfd8dc;
  --grid-major: #78909c;
  --bar-color: #42a5f5;
}

body {
  font-family: 'Zen Maru Gothic', sans-serif;
  background-color: var(--bg-color);
  color: #333;
  margin: 0;
  padding: 20px;
}

.quest-app { max-width: 800px; margin: 0 auto; }

header { text-align: center; margin-bottom: 20px; }
header h1 { color: var(--primary); font-size: 1.8rem; background: white; padding: 15px; border-radius: 12px; box-shadow: 0 4px 0 #c5e1a5; }

.hidden { display: none !important; }

.mission-card {
  background: var(--card-bg);
  border-radius: 16px;
  box-shadow: 0 6px 15px rgba(0,0,0,0.08);
  margin-bottom: 30px;
  overflow: hidden;
  border: 3px solid #e0e0e0;
  transition: all 0.3s ease;
}

.mission-card.active { border-color: var(--secondary); box-shadow: 0 0 15px rgba(245, 127, 23, 0.3); }

.mission-header { background: #e8f5e9; padding: 15px 20px; border-bottom: 3px solid #c8e6c9; }
.mission-header h2 { margin: 0; color: #1b5e20; font-size: 1.4rem; }

.mission-content { padding: 20px; }
.instruction { font-size: 1.2rem; font-weight: bold; text-align: center; color: #455a64; margin-bottom: 20px; }

/* ヒント */
.hint-box { text-align: center; margin-bottom: 20px; }
.hint-toggle-btn { background: #ffe082; border: none; padding: 8px 16px; border-radius: 20px; font-weight: bold; cursor: pointer; color: #f57f17; box-shadow: 0 2px 0 #ffca28; }
.hint-toggle-btn:active { transform: translateY(2px); box-shadow: none; }
.hint-text { margin-top: 10px; background: #fff8e1; padding: 15px; border-radius: 8px; border: 1px dashed #ffb300; font-size: 1.1rem; line-height: 1.5; text-align: left; }

/* M1: 正の字エリア */
.tally-row { display: flex; align-items: center; justify-content: space-between; background: #fafafa; border: 2px solid #eeeeee; border-radius: 8px; padding: 10px 15px; margin-bottom: 10px; }
.tally-name { font-weight: bold; font-size: 1.2rem; width: 80px; }
.tally-svgs { flex-grow: 1; display: flex; flex-wrap: wrap; gap: 5px; min-height: 45px; padding-left: 15px; }
.tally-controls button { width: 40px; height: 40px; font-size: 1.5rem; border: none; border-radius: 8px; cursor: pointer; background: #e0e0e0; margin-left: 5px; }
.tally-controls .add-btn { background: #81c784; color: white; box-shadow: 0 3px 0 #4caf50; }
.tally-controls .add-btn:active { transform: translateY(3px); box-shadow: none; }

/* M2: 表スタイル */
.data-table { width: 100%; max-width: 400px; margin: 0 auto; border-collapse: collapse; font-size: 1.2rem; }
.data-table th, .data-table td { border: 2px solid #b0bec5; padding: 10px; text-align: center; }
.data-table th { background: #e3f2fd; color: #1565c0; }
.num-input { width: 60px; font-size: 1.2rem; padding: 5px; text-align: center; border: 2px solid #90a4ae; border-radius: 6px; }
.total-row { background: #fff3e0; font-weight: bold; }
.total-input { background: #ffe082; font-weight: bold; }

/* M3: グラフスタイル（正確な配置） */
.graph-wrapper { max-width: 600px; margin: 0 auto; }
.graph-visual { display: flex; height: 300px; }
.y-axis { position: relative; width: 40px; margin-right: 10px; }
.y-axis span { position: absolute; right: 0; transform: translateY(-50%); font-weight: bold; color: #546e7a; line-height: 1; }

.graph-grid { position: relative; flex-grow: 1; border-left: 2px solid var(--grid-major); border-bottom: 2px solid var(--grid-major); }
.grid-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: repeating-linear-gradient(to top, transparent, transparent calc(100% / 15 - 1px), var(--grid-line) calc(100% / 15 - 1px), var(--grid-line) calc(100% / 15)); }
.grid-bg::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: repeating-linear-gradient(to top, transparent, transparent calc(100% / 3 - 2px), var(--grid-major) calc(100% / 3 - 2px), var(--grid-major) calc(100% / 3)); pointer-events: none; }

.bars-area { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; }
.bar-slot { flex: 1; position: relative; display: flex; justify-content: center; }
.bar { position: absolute; bottom: 0; width: 40px; background-color: var(--bar-color); border: 2px solid #1565c0; border-bottom: none; height: 0%; transition: height 0.3s; z-index: 10; }

.x-axis { display: flex; margin-left: 50px; margin-top: 5px; }
.x-label { flex: 1; text-align: center; font-weight: bold; font-size: 0.9rem; }

.graph-controls { display: flex; margin-left: 50px; margin-top: 10px; background: #eceff1; padding: 10px 0; border-radius: 8px; }
.control-btn-group { flex: 1; display: flex; justify-content: center; gap: 5px; }
.control-btn-group button { width: 35px; height: 35px; border: none; border-radius: 6px; background: #cfd8dc; font-size: 1.1rem; cursor: pointer; box-shadow: 0 2px 0 #90a4ae; }
.control-btn-group button:active { transform: translateY(2px); box-shadow: none; }

/* ボタン類 */
.action-area { text-align: center; margin-top: 25px; }
.action-btn { background: var(--secondary); color: white; border: none; padding: 12px 30px; font-size: 1.3rem; font-weight: bold; border-radius: 30px; cursor: pointer; box-shadow: 0 4px 0 #e65100; transition: 0.1s; }
.action-btn:active { transform: translateY(4px); box-shadow: none; }
.final-btn { background: #e53935; box-shadow: 0 4px 0 #c62828; }
.feedback-msg { font-weight: bold; font-size: 1.2rem; min-height: 25px; margin-top: 10px; }
.ok-msg { color: #2e7d32; }
.ng-msg { color: #c62828; }

.clear-message { text-align: center; padding: 30px; background: #fff9c4; border-radius: 16px; border: 4px solid #fbc02d; margin-top: 20px; animation: pop 0.5s; }
.clear-message h2 { color: #f57f17; font-size: 2rem; margin: 0 0 10px; }
@keyframes pop { 0% { transform: scale(0.9); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }