:root {
  --theme: #2b8a3e; --bg: #f4f6f8; --border: #ced4da;
  --primary: #4dabf7; --orange: #ff922b; --danger: #fa5252; --success: #40c057;
  --grid-bg: #fff; --line-color: #343a40;
}

* { box-sizing: border-box; }
body { font-family: 'Hiragino Maru Gothic ProN', 'Rounded M+ 1c', sans-serif; background-color: var(--bg); margin: 0; padding: 10px; display: flex; justify-content: center; color: #343a40; }
.app-container { background: white; max-width: 1000px; width: 100%; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.1); overflow: hidden; }

/* Header & Mission */
header { background: #ebfbee; padding: 15px; text-align: center; border-bottom: 3px solid var(--theme); }
h1 { margin: 0 0 10px; color: var(--theme); font-size: 1.5rem; }
.notebook-prompt { display: inline-block; background: white; border: 2px solid #8ce99a; color: var(--theme); padding: 5px 15px; border-radius: 20px; font-weight: bold; }
.mission-bar { background: #f8f9fa; padding: 10px 15px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; border-bottom: 2px solid var(--border); }
.mission-label { font-weight: bold; color: #495057; }
.problem-display { margin-left: auto; font-size: 1.4rem; font-weight: bold; background: white; padding: 4px 15px; border: 2px solid #adb5bd; border-radius: 8px; color: #495057; }

/* Buttons */
.btn { padding: 6px 12px; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; font-size: 0.95rem; transition: transform 0.1s; }
.btn:active { transform: translateY(2px); }
.btn-outline { background: white; border: 2px solid var(--theme); color: var(--theme); }
.btn-outline:hover { background: #ebfbee; }
.btn-red { background: var(--danger); color: white; }
.btn-red.outline { background: white; border: 2px solid var(--danger); color: var(--danger); }
.btn-green { background: var(--success); color: white; }
.btn-yellow { background: var(--warning); color: #343a40; }
.small-btn { padding: 4px 8px; font-size: 0.85rem; }

/* Workspace Layout */
.workspace { display: flex; flex-wrap: wrap; border-bottom: 2px dashed var(--border); }
.hissan-section { flex: 1; min-width: 350px; padding: 20px; border-right: 2px solid var(--border); background: #f1f3f5; }
.block-section { flex: 1.2; min-width: 400px; padding: 20px; background: white; }
.vis-header { font-weight: bold; margin-bottom: 15px; color: #495057; display: flex; justify-content: space-between; align-items: center; }
.vis-header small { color: #868e96; font-weight: normal; }

/* ★ Hissan Board (筆算エリア - レイアウトずれを完全修正) ★ */
.hissan-board { background: var(--grid-bg); padding: 20px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.05); position: relative; border: 1px solid var(--border); background-image: linear-gradient(#e9ecef 1px, transparent 1px), linear-gradient(90deg, #e9ecef 1px, transparent 1px); background-size: 20px 20px; display: flex; justify-content: center; }
.h-grid { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 5px; width: max-content; }
.h-row { display: flex; align-items: center; }
.h-cell { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; }
.h-cell.empty, .h-cell.sign { width: 40px; }
.h-cell.dot-col { width: 20px; position: relative; }
.labels .h-cell { height: 30px; font-weight: bold; color: #adb5bd; font-size: 0.9rem; }
.sign { font-size: 1.8rem; font-weight: bold; color: #495057; justify-content: flex-end; padding-right: 10px; }
.num-in { width: 44px; height: 48px; text-align: center; font-size: 1.8rem; font-weight: bold; border: 2px solid #dee2e6; border-radius: 6px; font-family: 'Courier New', monospace; color: #343a40; background: rgba(255,255,255,0.9); transition: border-color 0.2s; }
.num-in:focus { border-color: var(--primary); outline: none; background: white; }
.ans-in { background: #e7f5ff; border-color: #a5d8ff; }

/* 赤い点線（1/10の位50px + dot-col20pxの半分で、右から59pxの位置） */
.decimal-guideline { position: absolute; top: -10px; bottom: -10px; right: 59px; width: 0; border-left: 2px dashed #ff8787; z-index: 1; pointer-events: none; }

/* ★ 小数点ボタン（確実に押せるように調整） ★ */
.dot-btn { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #adb5bd; background: white; cursor: pointer; position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); transition: all 0.2s; z-index: 10; padding: 0; }
.dot-btn:active { transform: translateX(-50%) scale(0.9); }
.dot-btn:focus { outline: none; }
.dot-btn.active { background: #343a40; border-color: #343a40; }
.dot-btn.ans-dot.active { background: var(--danger); border-color: var(--danger); }

/* メモ欄 */
.memo-row .h-cell { height: 30px; }
.memo-in { width: 30px; height: 30px; text-align: center; font-size: 1.1rem; border: 1px dashed #adb5bd; border-radius: 50%; color: #e03131; font-weight: bold; background: transparent; }
.memo-in:focus { border-style: solid; outline: none; }
.h-line { height: 3px; background: var(--line-color); width: 100%; margin: 5px 0; border-radius: 2px; }

/* Block Simulator */
.block-actions { min-height: 40px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.block-msg { font-weight: bold; color: #495057; }
.hidden { display: none !important; }
.block-stage { display: flex; gap: 15px; justify-content: center; }
.block-col { flex: 1; display: flex; flex-direction: column; align-items: center; background: #f8f9fa; border: 2px solid var(--border); border-radius: 8px; padding: 10px; min-height: 250px; }
.col-label { font-weight: bold; color: #868e96; margin-bottom: 10px; border-bottom: 2px solid #dee2e6; width: 100%; text-align: center; padding-bottom: 5px; }
.block-area { display: flex; flex-wrap: wrap; gap: 5px; align-content: flex-start; justify-content: center; width: 100%; height: 100%; }

/* ブロックの見た目 */
.b-10 { width: 18px; height: 90px; background: #3bc9db; border: 1px solid #15aabf; border-radius: 3px; animation: pop 0.2s; }
.b-1 { width: 40px; height: 40px; background: var(--primary); border: 2px solid #1864ab; border-radius: 4px; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 1.2rem; animation: pop 0.2s; }
.b-01 { width: 14px; height: 35px; background: var(--primary); border: 1px solid #1864ab; border-radius: 2px; animation: pop 0.2s; }

/* ひき算時のオレンジ（相殺）ブロック */
.b-orange { background: var(--orange) !important; border-color: #e8590c !important; opacity: 0.85; position: relative; }
.b-orange::after { content: "✖"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 0.8rem; font-weight: bold; }
@keyframes pop { 0% { transform: scale(0.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* Notebook Guide */
.notebook-guide { background: #fff9db; padding: 15px; border-top: 3px dashed #fcc419; text-align: center; }
.notebook-guide h3 { margin: 0 0 10px; color: #d4a017; font-size: 1.1rem; }
.notebook-keywords { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.notebook-keywords span { background: white; padding: 6px 12px; border-radius: 20px; border: 2px solid #ffe066; font-weight: bold; color: #495057; font-size: 0.95rem; }

/* Modal */
.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.modal-content { background: white; padding: 30px; border-radius: 12px; max-width: 400px; width: 90%; text-align: center; border-top: 8px solid var(--warning); }
.mt-3 { margin-top: 15px; }