/* 埋立の配色。岩盤と石の灰色を基調に、アクセントは土の橙（--accent） */
:root {
  --bg: #1c1d1f; --panel: #34363a; --line: #55585d; --shade: #141517; --sunken: #232427; --empty: #4a4c51;
  --accent: #ffa64d; --stone: #8a8c90;
  --mark: #ffa64d;
}
/* 背景は石のレンガの目地 */
.bg { background-image:repeating-linear-gradient(0deg, #26272a 0 3px, transparent 3px 60px), repeating-linear-gradient(90deg, #26272a 0 3px, transparent 3px 120px); }

/* 企画の欄：左に勝ちの数、右に箱の埋まり具合 */
.sum { width:420px; flex:none; min-width:0; display:flex; flex-direction:column; justify-content:space-between; }
.box { flex:1; min-width:0; display:flex; flex-direction:column; justify-content:space-between; }
.label { font-size:30px; line-height:1; color:var(--stone); white-space:nowrap; }
.head { display:flex; align-items:flex-end; gap:14px; white-space:nowrap; }
.head svg { flex:none; margin-bottom:8px; }
.count { font-size:100px; line-height:.9; color:var(--accent); white-space:nowrap; }
.goal { font-size:48px; line-height:1; padding-bottom:4px; }
.cells { display:grid; gap:4px; }
.cells i { height:22px; background:var(--empty); }
.cells i.on { background:var(--accent); }
.fill-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; white-space:nowrap; }
.fill-num { flex:none; font-size:100px; line-height:.9; color:#ffffff; }
.fill-num small { font-size:48px; margin-left:4px; }
.box-line { min-width:0; overflow:hidden; font-size:36px; line-height:1.1; text-align:right; white-space:nowrap; }
.box-hold { color:var(--accent); }
.box-off { color:var(--hinder); }
.box-line .stopped { display:inline-block; }
.bar { height:44px; background:var(--sunken); box-shadow:inset 0 0 0 4px var(--empty); overflow:hidden; }
.bar b { display:block; height:100%; width:0; background:repeating-linear-gradient(90deg, var(--stone) 0 40px, #7a7c80 40px 44px); transition:width .4s; }
.bar.full b { background:var(--accent); }

/* いいねのページは1段に広げる */
.gift-page.promo { grid-template-rows:minmax(0, 1fr); }

/* いいねのバー */
.like-cells b { background:var(--accent); }

/* 出席カード。石のブロックのスタンプ */
.attend { --attend-accent:#ffa64d; --attend-faint:#a3a5aa;
  --attend-shape:polygon(8% 8%, 92% 8%, 92% 92%, 8% 92%); }

/* 配信の残り時間の輪の色 */
:root { --clock-accent:#ffa64d; }