/* うさぎさんの1日：部屋のページ（style.css）に足す分だけ */
body.day { --accent: #4d7fb8; --c0: #f0a868; --c1: #6fb1c9; --c2: #7fae78; --c3: #e8a23d; --c4: #8f8fc9; --c5: #4b5a8c; }
body.day .brand h1 span { color: var(--accent); }
body.day .kicker { color: var(--accent); }
body.day .intro h2 { background: linear-gradient(90deg, #f0a868 0%, #4d7fb8 55%, #2a3158 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
body.day .primary { background: var(--accent); box-shadow: 0 6px 18px rgba(77, 127, 184, 0.4); text-decoration: none; }
.startRow { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; margin-top: 4px; }
.ghost { padding: 12px 22px; border-radius: 999px; background: #fff; border: 2px solid var(--line); font-size: 15px; font-weight: 900; }
.ghost:hover:not(:disabled) { border-color: var(--accent); }
.ghost:disabled { opacity: 0.5; cursor: progress; }
.lead b { color: var(--accent); }

/* 舞台が変わるときの幕 */
#fade { position: fixed; inset: 0; z-index: 4; background: #f6f1e7; opacity: 0; pointer-events: none; transition: opacity 0.22s ease-in; }
#fade.on { opacity: 1; }

/* ── 吹き出し ── */
.bb { position: absolute; left: 0; top: 0; max-width: 240px; padding: 7px 12px 8px; border-radius: 16px; background: #fffdf8; border: 2.5px solid var(--ink); box-shadow: 0 4px 0 rgba(43, 42, 51, 0.18); will-change: transform; animation: bbIn 0.22s cubic-bezier(0.3, 1.5, 0.5, 1); transform-origin: 50% 100%; }
.bb p { font-size: 13.5px; font-weight: 700; line-height: 1.45; white-space: pre-line; }
.bb b { display: block; font-size: 10.5px; font-weight: 900; letter-spacing: 0.04em; color: var(--muted); }
.bb::after { content: ""; position: absolute; left: 50%; bottom: -9px; width: 14px; height: 14px; margin-left: -7px; background: inherit; border-right: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); transform: rotate(45deg); }
.bb.say b { color: #4d7fb8; }
.bb.npc { background: #f3f2ef; border-color: #6d6b78; box-shadow: 0 4px 0 rgba(43, 42, 51, 0.1); }
.bb.npc::after { border-color: #6d6b78; }
.bb.npc p { color: #4b4a55; }
/* 心の声：点線のふち＋小さな丸のしっぽ */
.bb.think { border-style: dashed; border-color: #6f86a8; background: #f3f8ff; border-radius: 22px; box-shadow: none; }
.bb.think p { color: #3d5275; }
.bb.think::after { left: 50%; bottom: -13px; width: 9px; height: 9px; margin-left: -12px; border: 2.5px dashed #6f86a8; border-radius: 50%; transform: none; background: #f3f8ff; }
.bb.think::before { content: ""; position: absolute; left: 50%; bottom: -22px; width: 5px; height: 5px; margin-left: -20px; border-radius: 50%; background: #6f86a8; }
.bb.dark { background: #2b2a33; border-color: #2b2a33; }
.bb.dark p { color: #fff; }
.bb.dark::after { background: #2b2a33; border-color: #2b2a33; }
.bb.big p { font-size: 17px; font-weight: 900; }
.bb.small { padding: 4px 9px 5px; }
.bb.small p { font-size: 11.5px; }
/* 音・効果音：ふちなしの太い文字 */
.bb.sfx { background: none; border: 0; box-shadow: none; padding: 0; }
.bb.sfx::after { display: none; }
.bb.sfx p { font-size: 19px; font-weight: 900; color: #e2674f; -webkit-text-stroke: 5px #fffdf8; paint-order: stroke fill; white-space: nowrap; letter-spacing: 0.02em; }
.bb.sfx.blue p { color: #4d7fb8; }
.bb.sfx.gray p { color: #6d6b78; font-size: 16px; }
@keyframes bbIn { from { opacity: 0; scale: 0.6; } }
body.has-panel #bubbles, body.loading #bubbles, body.intro-open #bubbles { display: none; }

/* ── 下：説明カードと操作 ── */
.dayBottom { width: min(760px, calc(100% - 28px)); gap: 8px; }
.cap { background: var(--panel); border-radius: 18px; padding: 10px 16px 12px; box-shadow: var(--shadow); border-left: 6px solid var(--chap, var(--accent)); }
.capHead { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.capHead .num { font-size: 12px; font-weight: 900; color: #fff; background: var(--chap, var(--accent)); padding: 1px 9px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.capHead .time { font-size: 16px; font-weight: 900; color: var(--ink); font-variant-numeric: tabular-nums; }
.capHead .place { font-size: 14px; font-weight: 900; color: var(--ink); }
.capHead .theme { margin-left: auto; font-size: 11.5px; padding: 2px 9px; border-radius: 8px; background: rgba(43, 42, 51, 0.07); white-space: nowrap; }
.capHead .theme::before { content: "元のテーマ："; opacity: 0.7; }
.capText { margin-top: 4px; font-size: 17px; font-weight: 700; line-height: 1.55; text-wrap: pretty; }
.capFoot { display: flex; gap: 12px; margin-top: 4px; font-size: 11.5px; }
.capFoot a { color: var(--muted); }
.ctrl { background: var(--panel); border-radius: 20px; padding: 8px 12px 10px; box-shadow: var(--shadow); }
.ctrlRow { display: flex; align-items: center; gap: 8px; }
.cb { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(43, 42, 51, 0.07); flex: none; }
.cb:hover { background: rgba(43, 42, 51, 0.14); }
.cb svg { width: 18px; height: 18px; fill: currentColor; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cb.main { width: 46px; height: 46px; background: var(--ink); color: #fff; }
.cb.main:hover { background: #45434f; }
.ctrl #clock { font-size: 20px; min-width: 62px; margin-left: 6px; }
.auto { margin-left: auto; display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; cursor: pointer; user-select: none; }
.auto input { appearance: none; -webkit-appearance: none; position: relative; width: 40px; height: 24px; border-radius: 12px; background: rgba(43, 42, 51, 0.2); transition: background 0.2s; cursor: pointer; flex: none; }
.auto input::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: transform 0.2s; }
.auto input:checked { background: var(--accent); }
.auto input:checked::after { transform: translateX(16px); }
/* 52場面のバー（章ごとに色分け） */
.track { display: flex; gap: 5px; margin-top: 8px; }
.chap { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.chap > span { font-size: 10.5px; font-weight: 900; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: clip; padding-left: 1px; }
.chap.on > span { color: var(--ink); }
.segs { display: flex; gap: 2px; }
.seg { flex: 1; min-width: 0; height: 16px; padding: 0; border-radius: 4px; background: color-mix(in srgb, var(--cc) 30%, #fff); position: relative; }
.seg:hover { background: color-mix(in srgb, var(--cc) 65%, #fff); }
.seg.done { background: color-mix(in srgb, var(--cc) 62%, #fff); }
.seg.on { background: var(--cc); outline: 2.5px solid var(--ink); outline-offset: 1px; z-index: 1; }
.seg i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 4px; background: rgba(43, 42, 51, 0.28); pointer-events: none; }

/* ── 場面リスト ── */
.panel .sc { display: grid; grid-template-columns: 34px 46px 1fr; gap: 2px 8px; align-items: baseline; width: 100%; padding: 9px 4px; text-align: left; }
.panel .sc:hover .tx { color: #2f5d94; }
.panel .sc .n { font-size: 11.5px; font-weight: 900; color: #fff; background: var(--cc); border-radius: 999px; text-align: center; padding: 1px 0; font-variant-numeric: tabular-nums; }
.panel .sc .tm { font-size: 13px; font-weight: 900; font-variant-numeric: tabular-nums; }
.panel .sc .pl { font-size: 13px; font-weight: 900; }
.panel .sc .tx { grid-column: 2 / 4; font-size: 13.5px; line-height: 1.55; font-weight: 500; color: #4b4a55; }
.panel li.cur { background: #f3f8ff; }
.panel .glb { flex: none; font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: 8px; background: rgba(43, 42, 51, 0.06); text-decoration: none; color: var(--muted); white-space: nowrap; }
.panel .glb:hover { background: var(--ink); color: #fff; }
body.day .panel h3 { border-left-color: var(--cc, var(--accent)); }

@media (max-width: 759px) {
  .dayBottom { width: calc(100% - 16px); gap: 6px; }
  .cap { padding: 8px 12px 10px; border-radius: 16px; }
  .capText { font-size: 14.5px; line-height: 1.5; }
  .capHead { gap: 4px 8px; }
  .capHead .theme { margin-left: 0; font-size: 10.5px; }
  .capHead .theme::before { content: ""; }
  .capFoot { display: none; }
  .ctrl { padding: 7px 9px 9px; border-radius: 18px; }
  .cb { width: 36px; height: 36px; } .cb.main { width: 42px; height: 42px; }
  .ctrl #clock { font-size: 18px; min-width: 54px; margin-left: 2px; }
  .auto span { font-size: 12px; }
  .track { gap: 3px; } .segs { gap: 1px; } .seg { height: 18px; border-radius: 3px; }
  .chap > span { font-size: 9.5px; }
  .bb { max-width: 190px; padding: 5px 9px 6px; } .bb p { font-size: 12.5px; }
  .bb.sfx p { font-size: 16px; } .bb.big p { font-size: 15px; }
  .ghost { padding: 10px 18px; font-size: 14px; }
}