:root {
    --sense-color: #ff6b6b;
    --logic-color: #4facfe;
    --bg-dark: #2c3e50;
    --bg-timeline: #34495e;
    --panel-bg: #fff;
    --bg-body: #f0f2f5;
    --sub-row-bg: #f8f9fa; /* サブ項目用の薄いグレー */
}

body { font-family: "Helvetica Neue", Arial, sans-serif; background-color: var(--bg-body); padding: 20px; padding-bottom: 120px; }
.container { max-width: 950px; margin: 0 auto; background: var(--panel-bg); padding: 20px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
h1 { text-align: center; margin-bottom: 20px; }

/* フィルタエリア用スタイル */
.filter-group { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.filter-label { font-size: 0.8rem; font-weight: bold; color: #aaa; width: 50px; }
.filter-buttons { display: flex; gap: 5px; flex-wrap: wrap; }

.filter-btn {
    background: #444; border: 1px solid #555; color: #ddd;
    padding: 4px 10px; border-radius: 15px; cursor: pointer; font-size: 0.8rem; transition: 0.2s;
}
.filter-btn:hover { background: #555; }
.filter-btn.active { background: #eee; color: #333; border-color: #fff; font-weight: bold; }

/* Settings & Selector */
.game-settings { background: #e8f4f8; border: 2px solid #b3d4fc; padding: 15px; border-radius: 8px; margin-bottom: 20px; display: flex; gap: 20px; justify-content: center; }
.setting-item { width: 120px; }
.card-selector-area { background: #333; color: white; padding: 15px; border-radius: 8px; margin-bottom: 20px; text-align: center; }
.card-select { font-size: 1.1rem; padding: 8px; width: 100%; max-width: 500px; }

/* Tabs */
.tabs { display: flex; gap: 10px; margin-bottom: 20px; }
.tab-btn { flex: 1; padding: 12px; border: none; background: #e0e0e0; cursor: pointer; font-weight: bold; border-radius: 8px; }
.tab-btn.active-sense { background: var(--sense-color); color: white; }
.tab-btn.active-logic { background: var(--logic-color); color: white; }
.panel { display: none; }
.panel.active { display: block; }

/* Inputs */
.section-title { border-left: 4px solid #ccc; padding-left: 10px; margin: 25px 0 10px; font-weight: bold; color: #555; }
.duration-panel { background: #fdfdfd; padding: 15px; border-radius: 8px; border: 1px dashed #ccc; }

.row { display: flex; gap: 15px; flex-wrap: wrap; margin-bottom: 10px; }
/* サブレベルの行デザイン */
.row.sub-row { 
    background-color: var(--sub-row-bg); 
    padding: 10px; 
    border-radius: 6px; 
    margin-top: -5px; /* 上の行とくっつける */
    margin-bottom: 15px;
}
.row.sub-row label { font-size: 0.7rem; color: #7f8c8d; }
.row.sub-row input { font-size: 0.9rem; padding: 5px; }

/* 区切り線 */
.separator { border: 0; border-top: 1px solid #eee; margin: 15px 0; }

.col { flex: 1; min-width: 120px; }
label { display: block; font-size: 0.8rem; margin-bottom: 4px; font-weight: bold; color: #666; }
input { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 6px; box-sizing: border-box; }
input.auto-filled { background-color: #e8f8f5; border-color: #2ecc71; }

/* HUD */
.hud-wrapper { position: sticky; bottom: 20px; z-index: 100; display: flex; flex-direction: column; gap: 10px; }
.hud-row { display: flex; background: var(--bg-dark); color: white; border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
.hud-main { padding: 15px; align-items: center; min-height: 100px; }
.hud-main .col-left { flex: 1; text-align: right; padding-right: 15px; border-right: 1px solid #555; }
.hud-main .col-center { flex: 0 0 180px; text-align: center; }
.hud-main .col-right { flex: 1; text-align: left; padding-left: 15px; border-left: 1px solid #555; }

.score-val { font-size: 2.5rem; font-weight: 800; line-height: 1; color: #ffd700; text-shadow: 0 0 10px rgba(255, 215, 0, 0.5); }
.score-sub { font-size: 1rem; color: #ffd700; opacity: 0.8; height: 1.2em; }

/* Tags */
.tags-container { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 5px; }
.tag-badge { 
    display: inline-block; padding: 2px 6px; border-radius: 4px; font-size: 0.7rem; font-weight: bold; color: #fff; border: 1px solid rgba(255,255,255,0.3);
}
.tag-badge.cost { background: #e74c3c; } 
.tag-badge.draw { background: #3498db; } 
.tag-badge.recov { background: #2ecc71; } 
.tag-badge.other { background: #95a5a6; } 

/* Timeline */
.timeline-area { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; }
.timeline-card { background: var(--bg-timeline); color: #ecf0f1; border-radius: 8px; min-width: 200px; flex-shrink: 0; display: flex; flex-direction: column; font-size: 0.85rem; border: 1px solid #4a6278; opacity: 0.9; }
.timeline-card.active-cond { border: 2px solid #ffd700; background: #3e5871; opacity: 1; }
.timeline-header { background: rgba(0,0,0,0.2); padding: 5px 10px; font-size: 0.7rem; font-weight: bold; color: #aab7c4; display: flex; justify-content: space-between; }
.timeline-body { display: flex; padding: 8px; flex: 1; }
.mini-col { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 3px; }
.mini-col.left { text-align: right; align-items: flex-end; padding-right: 5px; border-right: 1px solid rgba(255,255,255,0.1); }
.mini-col.center { flex: 0 0 40px; text-align: center; }
.mini-col.right { text-align: left; align-items: flex-start; padding-left: 5px; border-left: 1px solid rgba(255,255,255,0.1); }

/* Icons */
.buff-item { display: inline-flex; align-items: center; gap: 4px; background: rgba(255,255,255,0.1); padding: 2px 6px; border-radius: 12px; font-size: 0.75rem; white-space: nowrap; }
.icon { width: 12px; height: 12px; border-radius: 50%; display: inline-block; border: 1px solid white; flex-shrink: 0; }
.icon.conc { background: #ff9f43; } 
.icon.good { background: #ff6b6b; } 
.icon.perf { background: linear-gradient(135deg, #ff6b6b, #feca57); } 
.icon.imp { background: #ff9ff3; } 
.icon.mot { background: #54a0ff; } 
.icon.genki { background: #1dd1a1; }
.icon.text { background: #a4b0be; border-radius: 4px; }
.icon.cond { background: #9b59b6; }
.empty-slot { opacity: 0.2; font-size: 0.7rem; }