/* 残機制の配色。ベースは黒曜石の暗い紫、メインは薄紫、アクセントは残機の赤 */
:root {
  --bg: #15121d; --panel: #241f33; --line: #4a4068; --shade: #0c0a12;
  --sunken: #1a1626; --empty: #3a3350; --mark: #b9a6ee; --accent: #ff6b78;
}
.bg { background-image:repeating-linear-gradient(0deg, #1e1a2a 0 3px, transparent 3px 60px), repeating-linear-gradient(90deg, #1e1a2a 0 3px, transparent 3px 60px); }
.sum { width:400px; flex:none; display:flex; flex-direction:column; justify-content:space-between; }
.label { font-size:36px; line-height:1; color:var(--mark); }
.hearts { display:flex; align-items:center; gap:14px; }
.hearts svg { flex:none; color:var(--accent); }
.hearts svg.off { color:var(--empty); }
.lives { margin-left:auto; font-size:96px; line-height:.9; color:var(--accent); }
.try { font-size:44px; line-height:1; white-space:nowrap; }
.main { flex:1; min-width:0; display:flex; flex-direction:column; justify-content:space-between; }
.steps { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px; }
.steps div { height:64px; display:flex; align-items:center; justify-content:center; font-size:40px; background:var(--sunken); color:#8d8499; }
.steps .done { background:var(--mark); color:var(--bg); }
.steps .now { box-shadow:inset 0 0 0 4px var(--mark); color:#fff; }
.plan.clear { box-shadow:inset 4px 4px 0 var(--gacha), inset -4px -4px 0 #8a6a12; }