/* 配信画面の共通部分。配色と背景は企画の theme.css が決める */
:root {
  --panel: #1f2531; --line: #3b4560; --shade: #0b0d12; --text: #ffffff;
  --help: #8cf5a8; --hinder: #ff9a9a; --gacha: #ffd34d; --mark: #e08cff; --accent: #5fe3e6;
  --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; }
.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; top:-32px; padding:4px 12px; background:var(--shade); font-size:26px; 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); }

/* いいねの進み具合 */
.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; }

/* ?part=top は1枚の透明なソースに、カード、案内、全面の演出、ゲーム画面に被せる表示を出す */
.toast, .notice, .alert, .game-layer { display:none; }
.overlay-part .bg, .overlay-part .gifts, .overlay-part .likes, .overlay-part .plan { display:none; }
.card-only #stage { width:640px; height:500px; }
.top-part .game-layer { display:block; position:absolute; left:0; top:170px; width:1080px; height:608px; overflow:hidden; }
/* カードの置き場。?part=card のソースの設定（左301・上1312、表示の大きさ 779×608）と同じ場所 */
.card-box { position:absolute; left:0; top:0; width:640px; height:500px; }
.top-part .card-box { left:301px; top:1312px; transform:scale(1.2172); transform-origin:0 0; }
.has-card .toast { --tone:var(--mark); display:flex; right:0; top:8px; width:610px; height:156px; padding:14px 22px; gap:18px; align-items:center;
                    background:var(--panel); box-shadow:inset 4px 4px 0 var(--tone), inset -4px -4px 0 var(--shade);
                    transform:translateX(110%); transition:transform .45s ease; }
.has-card .toast.show { transform:none; }
.toast.up { --tone:var(--help); }
.toast.down { --tone:var(--hinder); }
.toast .num { flex:none; font-size:62px; color:var(--tone); white-space:nowrap; }
.toast .num:empty { display:none; }
.toast .icon { display:none; }
.toast .note:empty { display:none; }
.toast .text { flex:1; min-width:0; }
.toast .top { display:flex; justify-content:space-between; align-items:baseline; gap:12px; white-space:nowrap; }
.toast .kind { font-size:30px; color:var(--tone); flex:none; }
.toast .who { font-size:28px; color:#e6e6e6; overflow:hidden; min-width:0; }
.toast .what { font-size:42px; line-height:1.25; white-space:nowrap; overflow:hidden; }
/* 回転の表示。減る目だけ赤い地にする */
.reel { display:none; grid-template-columns:repeat(5, 1fr) 1.45fr; gap:4px; margin-top:4px; }
.rolling .reel { display:grid; }
.rolling .what { font-size:32px !important; line-height:1.1; }
.reel span { height:56px; display:flex; align-items:center; justify-content:center; font-size:36px; white-space:nowrap; color:var(--help); background:var(--shade); border:3px solid var(--line); box-sizing:border-box; }
.reel span.minus { color:#fff; background:#a81c2a; }
.reel span.on { border-color:var(--gacha); box-shadow:0 0 0 3px var(--gacha); }

/* 案内。カードの下、立ち絵の胸のあたりに定期的に出す */
.has-card .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; }
.has-card .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; }

/* 全面の演出 */
.has-alert .alert { display:block; position:absolute; inset:0; background:#000; text-align:center; opacity:0; transition:opacity .25s; }
.has-alert .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 .gift-page { grid-template-rows:minmax(0, 1fr); }
.tall .plan { top:930px; height:380px; }