/* 配信画面の共通部分。配色と背景は企画の theme.css が決める */
:root {
  --panel: #1f2531; --line: #3b4560; --shade: #0b0d12; --text: #ffffff;
  --help: #8cf5a8; --hinder: #ff9a9a; --gacha: #ffd34d; --mark: #e08cff;
  --sunken: #151922; --empty: #343c4e; --bg: #11141a;
}
html, body { margin:0; width:100%; height:100%; overflow:hidden; background:transparent; }
body { font-family:"DotGothic16","BIZ UDPGothic","Meiryo UI",sans-serif; font-weight:bold; color:var(--text); }
/* 1080x1920 で描き、ソースの大きさに合わせて拡大縮小する */
#stage { position:absolute; left:0; top:0; width:1080px; height:1920px; transform-origin:0 0; }
/* ゲーム画面の場所（上から170、1080×608）だけ透明 */
.bg { position:absolute; inset:0; background-color:var(--bg); clip-path:path(evenodd,"M0 0 H1080 V1920 H0 Z M0 170 H1080 V778 H0 Z"); }
.frame { position:absolute; background:var(--panel); box-shadow:inset 4px 4px 0 var(--line), inset -4px -4px 0 var(--shade); box-sizing:border-box; }

/* ギフト一覧 */
.gifts { left:24px; top:786px; width:1032px; height:276px; background:none; box-shadow:none; }
/* ページ番号は一覧の上の右端に出す（本人選択 2026-11-09）。マスは欄の下まで使う */
.tiles { height:100%; }
.gift-page { display:none; grid-template-columns:repeat(3, minmax(0, 1fr)); grid-template-rows:repeat(2, minmax(0, 1fr)); gap:8px; height:100%; }
.gift-page.on { display:grid; }
/* 個数が少ないページは、1段に広げて絵を上、名前を下に大きく出す */
.gift-page.wide { grid-template-rows:minmax(0, 1fr); }
.gift-page.wide .tile { flex-direction:column; justify-content:center; gap:4px; }
.gift-page.wide img { width:100px; height:100px; }
.gift-page.wide .eff { text-align:center; }
.dots { position:absolute; right:0; bottom:100%; padding:3px 10px; background:var(--shade); font-size:22px; line-height:1; }
.tile { display:flex; align-items:center; gap:8px; padding:8px 10px; min-width:0; box-sizing:border-box; background:var(--panel);
        box-shadow:inset 4px 4px 0 var(--line), inset -4px -4px 0 var(--shade); white-space:nowrap; overflow:hidden; }
.tile img { width:88px; height:88px; object-fit:contain; flex:none; }
.tile .eff { line-height:1.1; white-space:pre; }
.tile.p .eff { color:var(--help); }
.tile.m .eff { color:var(--hinder); }
.tile.g .eff { color:var(--gacha); }
.tile .mark { width:88px; height:88px; flex:none; font-size:72px; line-height:88px; text-align:center; color:var(--help); }

/* ギフトと目標の関わりの1行（2026-11-10）。いいねのバーの上、画面の一番上の空いている所。下のソースだけに出す */
.headline { position:absolute; left:24px; top:34px; width:1032px; height:58px; display:flex; align-items:center; justify-content:center; gap:18px;
            font-size:34px; line-height:1; white-space:nowrap; color:var(--text); }
.headline:empty, .top-part .headline { display:none; }
.headline .m { color:var(--hinder); }
.headline .p { color:var(--help); }
.headline .goal { color:var(--gacha); }

/* いいねの進み具合 */
.likes { left:24px; top:114px; width:1032px; height:50px; padding:0 14px; display:flex; align-items:center; gap:14px; font-size:30px; line-height:1; white-space:nowrap; }
.like-total { flex:none; width:280px; }
.like-next { flex:none; width:320px; text-align:right; color:var(--mark); }
.like-cells { flex:1; min-width:0; display:grid; grid-template-columns:repeat(10, minmax(0, 1fr)); gap:4px; }
.like-cells i { height:26px; background:var(--empty); }
.like-cells b { display:block; height:100%; background:var(--mark); }

/* 企画の欄。中身は plan.js が決める */
.plan { left:24px; top:1070px; width:1032px; height:240px; padding:16px 22px; display:flex; gap:24px; overflow:hidden; }
.row { display:flex; align-items:center; gap:14px; height:58px; padding:0 12px; background:var(--sunken); font-size:34px; white-space:nowrap; min-width:0; }
.row span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.row b { flex:none; font-size:40px; }
.p { color:var(--help); } .m { color:var(--hinder); }
.stopped { padding:4px 12px; font-size:40px; color:var(--shade); background:var(--hinder); white-space:nowrap; }

/* ガチャの抽選。企画の欄の全体を使う */
.draw { display:none; position:absolute; inset:0; z-index:2; padding:14px 24px; gap:28px; align-items:center; box-sizing:border-box; background:var(--sunken); }
.draw.show { display:flex; }
.draw.result { box-shadow:inset 0 0 0 6px var(--gacha); }
.draw-pic { display:none; width:180px; height:180px; flex:none; object-fit:contain; image-rendering:pixelated; }
.draw.has-pic .draw-pic { display:block; }
.draw-text { flex:1; min-width:0; display:flex; flex-direction:column; gap:8px; }
.draw-top { display:flex; justify-content:space-between; gap:16px; font-size:32px; color:var(--mark); white-space:nowrap; }
.draw-name { font-size:88px; line-height:1.15; color:#c9c3d6; white-space:nowrap; text-align:center; }
.draw.result .draw-name { color:var(--gacha); }
.draw.has-pic .draw-name { text-align:left; }
.draw-sub { min-height:34px; font-size:28px; color:#a59db5; text-align:center; }
.draw.has-pic .draw-sub { text-align:left; }

/* ?part=top は1枚の透明なソースに、カード、案内、全面の演出、ゲーム画面に被せる表示を出す */
.toast, .notice, .alert, .game-layer { display:none; }
.top-part .bg, .top-part .gifts, .top-part .likes, .top-part .plan { display:none; }
.top-part .game-layer { display:block; position:absolute; left:0; top:170px; width:1080px; height:608px; overflow:hidden; }
/* カードの置き場。画面の右下、立ち絵の胸のあたり */
.card-box { position:absolute; left:301px; top:1312px; width:640px; height:500px; transform:scale(1.2172); transform-origin:0 0; }
/* ギフトのお礼と増減のカード（2026-11-09）。下のソースの企画の欄を短い時間だけ覆う。まとめ投げは「×個数」で1枚 */
.plan .toast { --tone:var(--mark); position:absolute; inset:0; z-index:4; display:flex; align-items:center; gap:36px; padding:20px 40px; box-sizing:border-box;
               background:var(--panel); box-shadow:inset 4px 4px 0 var(--tone), inset -4px -4px 0 var(--shade);
               opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s; }
.plan .toast.show { opacity:1; visibility:visible; }
.top-part .toast { display:none; }
.toast.up { --tone:var(--help); }
.toast.down { --tone:var(--hinder); }
.plan .toast .pic { width:200px; height:200px; max-height:100%; object-fit:contain; flex:none; }
.plan .toast .icon { display:none; width:200px; height:200px; max-height:100%; flex:none; background:center / contain no-repeat; image-rendering:pixelated; }
.plan .toast .text { flex:1; min-width:0; display:flex; flex-direction:column; gap:10px; }
.plan .toast .kind { font-size:34px; color:var(--tone); }
.plan .toast .what { display:flex; align-items:baseline; gap:20px; font-size:84px; line-height:1.1; white-space:nowrap; overflow:hidden; }
.plan .toast .what span:first-child { min-width:0; }
.plan .toast .times { flex:none; color:var(--gacha); font-size:.86em; }
.plan .toast .who { font-size:40px; color:#e6e6e6; white-space:nowrap; overflow:hidden; }
.plan .toast .note { font-size:28px; white-space:nowrap; overflow:hidden; }
.plan .toast .note:empty { display:none; }
.plan .toast .num { flex:none; font-size:110px; color:var(--tone); white-space:nowrap; }
.plan .toast .num:empty { display:none; }
/* 配信の残り時間（2026-11-09）。上のソースの右、前に案内の欄があった場所。カードとは別の部品として、残りの割合の輪と数字（本人選択「案B」）。
   時刻が入っている間だけ出す。案内の欄は出さない（本人指示） */
.end-clock { display:none; }
.top-part .end-clock.show { display:block; position:absolute; right:24px; top:300px; width:175px; height:175px; }
.end-clock svg { position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); }
.end-clock .end-base { fill:rgba(10, 13, 20, .72); stroke:var(--empty); stroke-width:8; }
.end-clock .end-ring { fill:none; stroke:var(--clock-accent, var(--gacha)); stroke-width:8; stroke-linecap:round; stroke-dasharray:100; transition:stroke-dashoffset 1s linear; }
.end-clock .end-in { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; }
.end-clock .clock-head { font-size:17px; color:#c9cfdb; }
.end-clock .clock-time { font-size:34px; line-height:1; color:#ffffff; white-space:nowrap; }
.end-clock.soon .clock-time { font-size:23px; color:var(--clock-accent, var(--gacha)); }
/* 企画の残り時間（ダイヤ透視など）。配信の時計の左に同じ輪で出す。配信の時計がないときは、その場所に出す */
.top-part .side-clock.show { right:215px; }
.top-part .side-clock.show.alone { right:24px; }
.side-clock .end-ring { stroke:var(--side-accent, var(--help)); }

/* ギフト一覧の、いいねとハートミーのページ */
.gift-page.promo .promo-tile { gap:14px; padding:8px 16px; }
.promo-tile .like, .promo-tile img { width:100px; height:100px; flex:none; object-fit:contain; }
.promo-text { display:flex; flex-direction:column; gap:4px; min-width:0; }
.promo-name { font-size:28px; line-height:1.1; color:var(--mark); white-space:nowrap; }
.promo-tile .eff { color:var(--help); white-space:nowrap; }

/* 案内。カードの下、立ち絵の胸のあたりに定期的に出す */
.top-part .notice { display:flex; flex-direction:column; justify-content:center; gap:6px; position:absolute; right:0; top:332px; width:470px; height:152px; padding:0 18px; box-sizing:border-box;
                     background:var(--panel); box-shadow:inset 4px 4px 0 var(--gacha), inset -4px -4px 0 var(--shade);
                     transform:translateX(110%); transition:transform .45s ease; }
.top-part .notice.show { transform:none; }
.notice div { font-size:36px; line-height:1.15; white-space:nowrap; }
.notice b { color:var(--gacha); }
.notice .long { font-size:28px; }
/* 配信の始め方の3行（/notice）。1行は全角16字まで */
.notice.script div { font-size:26px; line-height:1.3; color:#ffffff; }

/* 出席カード（2026-11-09）。下のソースの企画の欄を、まるごと6秒だけカードにする（本人指示）。
   左にギフトと名前、右に今月のカレンダー。色とスタンプの形は企画の theme.css が --attend-* で決める */
.attend { --attend-accent:var(--gacha); --attend-ink:#14171d; --attend-faint:#a8b0c2;
          --attend-shape:polygon(50% 2%, 61% 36%, 98% 36%, 68% 58%, 79% 92%, 50% 71%, 21% 92%, 32% 58%, 2% 36%, 39% 36%);
          position:absolute; inset:0; z-index:5; display:grid; grid-template-columns:300px 1fr; gap:24px; padding:16px 22px; box-sizing:border-box;
          background:var(--panel); box-shadow:inset 4px 4px 0 var(--line), inset -4px -4px 0 var(--shade);
          opacity:0; visibility:hidden; transition:opacity .35s, visibility .35s; }
.attend.show { opacity:1; visibility:visible; }
.top-part .attend { display:none; }
.attend-who { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; min-width:0; min-height:0; }
.attend-title { align-self:stretch; text-align:center; font-size:26px; padding:3px 0; color:var(--attend-ink); background:var(--attend-accent); }
.attend-who img { flex:1 1 auto; min-height:0; max-height:130px; width:auto; max-width:130px; object-fit:contain; }
.attend-gift { min-height:40px; display:flex; align-items:center; font-size:26px; color:var(--attend-accent); text-align:center; }
.attend-name { max-width:300px; text-align:center; line-height:1.15; overflow-wrap:anywhere; }
.attend-name small { display:inline-block; font-size:24px; color:var(--attend-faint); }
.attend-days { font-size:26px; color:var(--attend-faint); white-space:nowrap; }
.attend-days b { font-size:40px; color:var(--attend-accent); }
.attend-cal { min-width:0; min-height:0; display:flex; flex-direction:column; gap:4px; }
.attend-month { display:flex; justify-content:space-between; align-items:baseline; font-size:28px; color:var(--attend-faint); white-space:nowrap; }
.attend-foot { font-size:28px; color:var(--text); }
.attend-foot b { color:var(--attend-accent); }
.attend-award { padding:2px 18px; font-size:30px; color:#14171d; background:var(--gacha); }
.attend-grid { flex:1; min-height:0; display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); grid-template-rows:auto; grid-auto-rows:minmax(0, 1fr); gap:4px 6px; }
.attend-grid .dow { text-align:center; font-size:20px; line-height:1; color:var(--attend-faint); }
.attend-grid i { position:relative; display:flex; align-items:center; justify-content:center; font-style:normal; background:var(--empty); }
.attend-grid i.blank { background:none; }
.attend-grid i span { position:relative; font-size:20px; color:var(--attend-faint); }
.attend-grid i.on::before, .attend-grid i.today::before { content:""; position:absolute; left:50%; top:50%; height:92%; aspect-ratio:1; transform:translate(-50%, -50%);
                     background:var(--attend-accent); clip-path:var(--attend-shape); }
.attend-grid i.on span, .attend-grid i.today span { color:var(--attend-ink); font-size:17px; }
.attend-grid i.today { box-shadow:inset 0 0 0 3px var(--attend-accent); }
.attend-grid i.today::before { background:#ffffff; animation:stamp .6s ease-out both; }
@keyframes stamp { 0% { transform:translate(-50%, -50%) scale(2.4) rotate(-20deg); opacity:0; } 60% { transform:translate(-50%, -50%) scale(1) rotate(-8deg); opacity:1; }
                   100% { transform:translate(-50%, -50%) scale(1.1) rotate(-8deg); } }
@media (prefers-reduced-motion: reduce) { .attend-grid i.today::before { animation:none; transform:translate(-50%, -50%) scale(1.1) rotate(-8deg); } }

/* 全面の演出 */
.top-part .alert { display:block; position:absolute; inset:0; background:#000; text-align:center; opacity:0; transition:opacity .25s; }
.top-part .alert.show { opacity:1; }
.alert i { position:absolute; left:0; width:100%; height:18px; background:var(--alert, #e0202c); }
.alert-text { position:absolute; left:0; top:640px; width:100%; display:flex; flex-direction:column; gap:44px; align-items:center; }
.alert-count { font-size:56px; color:#c9c9c9; }
.alert-big { font-size:148px; line-height:1.1; color:var(--alert, #e0202c); white-space:nowrap; }
.alert-sub { font-size:76px; white-space:nowrap; }

/* ギフト一覧を1段にして、企画の欄を高くする配置 */
.tall .gifts { top:782px; height:142px; }
.tall .tiles { height:100%; }
.tall .dots { right:0; bottom:100%; }
.tall .gift-page { grid-template-rows:minmax(0, 1fr); }
.tall .plan { top:930px; height:380px; }

/* エンドロール。?part=top の全面を覆う。カードと全面演出はこの上に出る */
.endroll { display:none; }
.top-part .endroll.show { display:block; position:absolute; inset:0; overflow:hidden; background:#121d42 url(endroll.png) 0 0 / 1080px 1920px no-repeat; }
.endroll.show ~ .card-box .notice { display:none; }
/* エンドロールの間は、配信の残り時間と企画の残り時間の時計も出さない（本人の依頼 2026-11-10） */
.top-part .endroll.show ~ .card-box .end-clock { display:none; }
.end-scroll { position:absolute; left:130px; width:820px; top:0; text-align:center; text-shadow:-3px 0 0 #000, 3px 0 0 #000, 0 -3px 0 #000, 0 3px 0 #000, 0 0 8px #000; }
.end-title, .end-result, .end-head, .end-mvp-label, .end-mvp-name, .end-mvp-count, .end-thanks { white-space:nowrap; }
.end-title, .end-head, .end-mvp-label, .end-mvp-count { color:#ffd34d; }
.end-result { margin-top:8px; }
.end-head { margin-top:56px; }
.end-names { display:grid; gap:16px 20px; margin-top:20px; align-items:center; }
.end-names span { white-space:nowrap; min-width:0; }
.end-donors { margin-top:20px; font-size:52px; line-height:1.5; }
.end-donors div { display:flex; justify-content:center; align-items:baseline; white-space:nowrap; }
.end-rank { color:#ffd34d; margin-right:24px; }
.end-donors small { font-size:36px; margin-left:24px; }
.end-mvp { position:absolute; left:110px; right:110px; top:560px; text-align:center; text-shadow:-4px 0 0 #000, 4px 0 0 #000, 0 -4px 0 #000, 0 4px 0 #000, 0 0 12px #000; }
.end-mvp i { display:block; height:5px; width:100%; margin:36px auto; background:#f2692a; }
.end-thanks { margin-top:150px; }