/* ナマイロ LIVE の画面の形(一覧・視聴)。色・角丸・影・書体はテーマ(public/themes/<id>.css)の名前だけを使う。
   この中に色を直接書かない(ギフトの絵の中の色はギフトのデータ)。使う名前:
   --bg --bg2 --panel --panel2 --line --text --sub --accent --accent2 --neon --btn --on-btn --sel-bg --sel-line --on-sel
   --tab-on-bg --tab-on-text --live --on-live --glow-live --live-anim --glow-key --ok --warn --warn-text --link
   --radius --radius-s --shadow --font --font-head --head-weight
   --stage(映像の枠) --scrim --scrim-strong(映像の上の文字の下地) --on-video --on-video-sub --video-name --gift-line
   --video-hi(映像の上で目立たせる文字。連続の数 ×N など。--scrim-strong の上で読める色)--video-outline(映像の上の絵・文字のふち) --blur --ease --art-shadow */
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: var(--font); }
html { height: 100%; }
body { height: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; }
h1, h2, h3, .logo { font-family: var(--font-head); font-weight: var(--head-weight); }
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: var(--panel2); color: var(--text); border: 1px solid var(--line); white-space: nowrap; text-decoration: none; transition: filter .25s var(--ease), background .25s var(--ease); }
.btn:hover { filter: brightness(1.08); }
.btn.primary { background: var(--btn); color: var(--on-btn); border: 0; font-weight: 700; box-shadow: var(--glow-key); }
.btn.small { padding: 5px 10px; font-size: 13px; }
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 12px; background: var(--scrim); color: var(--on-video); }
.live-badge { background: var(--live); color: var(--on-live); font-weight: 800; letter-spacing: .05em; box-shadow: var(--glow-live); animation: var(--live-anim); }
@keyframes breathe { 50% { box-shadow: 0 0 2px transparent; } }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.hidden { display: none !important; }
/* ロゴ:「ナマイロ」+ 点つきの LIVE */
.logo { display: inline-flex; align-items: center; gap: 8px; font-size: 22px; text-decoration: none; color: var(--text); letter-spacing: .02em; }
.logo .lv { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font); font-size: 11px; font-weight: 800; letter-spacing: .08em; padding: 3px 8px; border-radius: 999px; background: var(--live); color: var(--on-live); box-shadow: var(--glow-live); }
.logo .lv i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ---- 一覧(サイトは既定のテーマ)。上のバー・いちばん人気(映像のようす)・カードの並び ---- */
.listpage { background:
  radial-gradient(900px 420px at 12% -8%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
  radial-gradient(800px 380px at 92% 0%, color-mix(in srgb, var(--neon) 12%, transparent), transparent 70%), var(--bg);
  background-repeat: no-repeat; background-attachment: fixed; }
.topbar { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--bg) 82%, transparent); -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2); border-bottom: 1px solid var(--line); }
.topbar .in { max-width: 1280px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; }
.topbar .grow { flex: 1; }
.chips { display: flex; gap: 8px; order: 3; width: 100%; }
@media (min-width: 640px) { .chips { order: 0; width: auto; } }
.chips button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border-radius: 999px; background: var(--panel2); color: var(--text); border: 1px solid var(--line); font-size: 14px; font-weight: 700; transition: background .2s var(--ease), color .2s var(--ease); }
.chips button:hover { filter: brightness(1.1); }
.chips button[aria-pressed="true"] { background: var(--tab-on-bg); color: var(--tab-on-text); border-color: var(--tab-on-bg); }
.chips .n:empty { display: none; }
.chips .n { font-size: 11px; min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--live); color: var(--on-live); text-align: center; }
.onair { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--sub); }
.onair b { color: var(--text); font-size: 15px; }
.onair.zero i { animation: none; background: var(--sub); }
.onair i, .lp i, .sec .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--live); flex: none; animation: dotpulse 1.6s ease-in-out infinite; }
.lp i { background: currentColor; }
@keyframes dotpulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
.tag { font-size: 12px; color: var(--sub); border: 1px solid var(--line); padding: 2px 8px; border-radius: 999px; }
@media (max-width: 480px) { .topbar .tag { display: none; } }
.top { max-width: 1280px; margin: 0 auto; padding: 16px; }
.sec { font-size: 17px; margin: 26px 2px 12px; display: flex; align-items: center; gap: 8px; }
.sec small { font-family: var(--font); font-weight: 400; font-size: 12px; color: var(--sub); }
/* LIVE の札と、映像の上の小さな札 */
.lp { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .08em; background: var(--live); color: var(--on-live); box-shadow: var(--glow-live); }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 12px; background: var(--scrim); color: var(--on-video); white-space: nowrap; -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.av { width: 30px; height: 30px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; background: var(--btn); color: var(--on-btn); box-shadow: 0 0 0 2px var(--live); }
/* 映像・サムネイルの入れ物(ようすの <video> とサムネイル 2 枚を重ねる) */
.media { position: relative; overflow: hidden; background: var(--stage); isolation: isolate; }
.media .snaps, .media .pv { position: absolute; inset: 0; width: 100%; height: 100%; }
.media .snap { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .9s var(--ease); }
.media .snap.on { opacity: 1; }
.media .pv { object-fit: cover; opacity: 0; transition: opacity .5s var(--ease); z-index: 1; background: transparent; }
.media.playing .pv { opacity: 1; }
.media .noimg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 42px; }
/* いちばん人気:幅いっぱいの大きな画面。映像のようす(だめなときはサムネイルをゆっくり動かす) */
.hero { position: relative; }
.feat { position: relative; display: block; text-decoration: none; color: var(--on-video); border-radius: calc(var(--radius) + 4px); overflow: hidden; aspect-ratio: 1 / 1; max-height: min(64vh, 640px); width: 100%; background: var(--stage); box-shadow: var(--shadow), 0 0 0 1px var(--line); }
@media (min-width: 760px) { .feat { aspect-ratio: 16 / 9; } }
.feat .media { position: absolute; inset: 0; transition: transform .6s var(--ease); }
.feat:hover .media { transform: scale(1.03); }
.feat .media:not(.playing) .kb { animation: kenburns 18s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform: scale(1.04) translate(-1%, -1%); } to { transform: scale(1.14) translate(2%, 1.5%); } }
.feat .shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, var(--scrim-strong) 0%, var(--scrim) 30%, transparent 62%), linear-gradient(to right, var(--scrim) 0%, transparent 55%); }
.feat::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--card-accent, var(--accent)) 55%, transparent); }
.feat .over { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
@media (min-width: 760px) { .feat .over { padding: 28px 32px; max-width: 760px; gap: 12px; } }
.feat .tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.feat .chip.top { background: var(--scrim-strong); color: var(--video-hi); font-weight: 700; }
.feat .t { margin: 0; font-size: clamp(20px, 3.2vw, 40px); line-height: 1.2; color: var(--on-video); text-shadow: 0 2px 12px var(--video-outline); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.feat .who { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; background: var(--scrim); padding: 4px 12px 4px 4px; border-radius: 999px; }
.feat .go { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; padding: 11px 26px; border-radius: 999px; background: var(--btn); color: var(--on-btn); font-weight: 800; font-size: 16px; box-shadow: var(--glow-key); transition: transform .2s var(--ease); }
.feat:hover .go { transform: translateX(3px); }
.pvbtn { position: absolute; top: 12px; right: 12px; z-index: 2; padding: 6px 12px; border-radius: 999px; font-size: 12px; background: var(--scrim-strong); color: var(--on-video); border: 1px solid var(--on-video-sub); }
/* ほかの配信:16:9 のカード(スマホ 2 列、PC は幅に合わせて 3〜5 列) */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 720px) { .grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; } }
.card { display: block; text-decoration: none; color: var(--text); border-radius: var(--radius); transition: transform .25s var(--ease); }
.card .media { aspect-ratio: 16 / 9; border-radius: var(--radius); box-shadow: var(--shadow), 0 0 0 1px var(--line); transition: box-shadow .25s var(--ease); }
.card:hover { transform: translateY(-3px); }
.card:hover .media, .card:focus-visible .media { box-shadow: var(--shadow), 0 0 0 2px var(--card-accent, var(--accent)); }
.card .snaps { transition: transform .5s var(--ease); }
.card:hover .snaps { transform: scale(1.05); }
.card .media .lp, .card .media .chip { position: absolute; z-index: 2; }
.card .tl { top: 8px; left: 8px; } .card .tr { top: 8px; right: 8px; } .card .br { bottom: 8px; right: 8px; }
.card .meta { display: flex; gap: 10px; padding: 10px 2px 4px; align-items: flex-start; }
.card .tx { min-width: 0; }
.card .t { font-weight: 700; font-size: 14px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card .s { font-size: 12px; color: var(--sub); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card:focus-visible, .feat:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
@media (max-width: 480px) { .card .chip.br { display: none; } .card .av { width: 26px; height: 26px; font-size: 12px; } }
/* お気に入りの丸いアイコン(配信中は光る輪) */
.favrow { display: flex; gap: 14px; overflow-x: auto; padding: 6px 2px 8px; scrollbar-width: thin; }
.fav { flex: none; width: 68px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; font-size: 11px; color: var(--sub); }
.fav .av { width: 58px; height: 58px; font-size: 20px; background: var(--panel2); color: var(--text); box-shadow: none; border: 2px solid var(--line); }
.fav.on .av { border: 3px solid var(--live); box-shadow: var(--glow-live); animation: var(--live-anim); }
.fav.on { color: var(--text); font-weight: 700; }
.fav .nm { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fav .st { font-size: 10px; }
.fav.on .st { color: var(--live); font-weight: 800; }
/* 配信がないとき:絵(public/img/empty-<テーマ>.webp)の真ん中に読める下地で文字。絵が無くても崩れない */
.empty { position: relative; display: flex; align-items: center; justify-content: center; min-height: 300px; aspect-ratio: 3 / 2; max-height: 70vh; width: 100%; padding: 16px;
  border-radius: var(--radius); border: 1px solid var(--line); overflow: hidden;
  background: var(--empty-img, none) center / cover no-repeat, linear-gradient(160deg, var(--bg2), var(--panel)); }
@media (min-width: 760px) { .empty { aspect-ratio: 16 / 9; } }
.empty .msg { max-width: 360px; text-align: center; background: var(--scrim-strong); color: var(--on-video); padding: 14px 18px; border-radius: var(--radius); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); transform: translateY(-12%); }
.empty .msg p { margin: 4px 0; font-size: 13px; color: var(--on-video-sub); }
.empty .msg b { font-family: var(--font-head); font-size: 17px; }
.foot { margin-top: 28px; font-size: 12px; color: var(--sub); }

/* ---- 視聴(映像の上は細いぼかしだけ。真ん中には何も置かない) ---- */
.watch { display: flex; justify-content: center; height: 100%; background: var(--bg); }
.stage { position: relative; height: 100%; width: 100%; max-width: 480px; background: var(--stage); overflow: hidden; color: var(--on-video); }
@media (min-width: 900px) { .stage { max-width: 520px; } }
.stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--stage); }
.stage.landscape video { object-fit: contain; }
.shade-top, .shade-bottom { position: absolute; left: 0; right: 0; pointer-events: none; }
.shade-top { top: 0; height: 96px; background: linear-gradient(var(--scrim), transparent); }
.shade-bottom { bottom: 0; height: 34%; background: linear-gradient(transparent, var(--scrim)); }
.bar { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; align-items: center; gap: 8px; }
.bar .btn.small { background: var(--scrim); color: var(--on-video); border-color: transparent; -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.who { display: flex; align-items: center; gap: 8px; background: var(--scrim); padding: 4px 10px 4px 4px; border-radius: 999px; min-width: 0; -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--btn); color: var(--on-btn); display: flex; align-items: center; justify-content: center; font-weight: 800; flex: none; }
.who .n { font-weight: 700; font-size: 14px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who .ti { font-size: 11px; color: var(--on-video-sub); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar .grow { flex: 1; }
.rank { position: absolute; top: 54px; left: 10px; display: flex; gap: 6px; }
.chat { position: absolute; left: 10px; right: 76px; bottom: 64px; max-height: 38%; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; mask-image: linear-gradient(transparent, #000 25%); scrollbar-width: none; }
.chat .m { align-self: flex-start; background: var(--scrim); color: var(--on-video); padding: 4px 10px; border-radius: 12px; font-size: 14px; line-height: 1.35; word-break: break-word; -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.chat .m b { color: var(--video-name); margin-right: 6px; font-weight: 600; }
.chat .m.sys { color: var(--video-hi); background: var(--scrim-strong); }
.chat .m.gift { background: var(--gift-line); }
.chat .m.mod b::after { content: " 配信者"; font-size: 10px; background: var(--live); color: var(--on-live); border-radius: 6px; padding: 0 4px; margin-left: 4px; }
.side { position: absolute; right: 10px; bottom: 64px; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.round { width: 52px; height: 52px; border-radius: 50%; background: var(--scrim); color: var(--on-video); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 22px; line-height: 1; -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.round small { font-size: 9px; margin-top: 3px; color: var(--on-video-sub); white-space: nowrap; letter-spacing: -.02em; }
.round.fb { font-size: 18px; } .round.fb small { font-size: 8px; line-height: 1.1; margin-top: 2px; }   /* 💬 ご意見・不具合(2 行の名前)*/
.round.gift { background: var(--btn); color: var(--on-btn); box-shadow: var(--glow-key); }
.round.gift small { color: inherit; }
.inputrow { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; gap: 8px; }
.inputrow input { flex: 1; min-width: 0; background: var(--scrim-strong); border: 1px solid var(--on-video-sub); color: var(--on-video); border-radius: 999px; padding: 10px 14px; font-size: 15px; }
.inputrow input::placeholder { color: var(--on-video-sub); opacity: .8; }
.center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 20px; }
.center.dim { background: var(--scrim-strong); }
.center small { color: var(--on-video-sub); }
/* 配信していないとき:テーマの絵を背景に */
.center.state { background: var(--empty-img, none) center / cover no-repeat, var(--stage); }
.center.state .msg { background: var(--scrim-strong); padding: 16px 20px; border-radius: var(--radius); display: flex; flex-direction: column; align-items: center; gap: 10px; -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.hearts { position: absolute; right: 18px; bottom: 120px; width: 40px; height: 300px; pointer-events: none; }
.heart { position: absolute; bottom: 0; left: 8px; font-size: 26px; animation: rise 2.2s ease-out forwards; }
@keyframes rise { 0% { transform: translate(0,0) scale(.6); opacity: 1; } 100% { transform: translate(var(--dx), -280px) scale(1.2); opacity: 0; } }
.fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
/* ---- ギフト演出のひな形(色は --c1〜--c3、長さは --d)。真ん中(顔)と下の操作欄をあける。暗くしない・大きく拡大しない・揺らさない ---- */
.fxa { position: absolute; animation: fxfade var(--d) linear forwards; }
@keyframes fxfade { 0% { opacity: 0; } 8% { opacity: 1; } 84% { opacity: 1; } 100% { opacity: 0; } }
.fxa svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* 描いた小さな絵(g.pic・g.piece。watch.js の artOf・pieceArt)は SVG と同じ大きさ・同じ動き */
.fxa img.pa { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; }
/* 明るい映像(白い壁など)の上でも絵の形が分かるように、絵のまわりに細いふち(花火の線もふくむ) */
.fxa .one, .fxa .art, .fxa .item, .fxa .bit, .fxa .emo { filter: drop-shadow(0 0 1.5px var(--video-outline)); }
.fxa .emo { display: block; text-align: center; font-size: 30px; line-height: 1.3; }
/* ripple:下のふち近くの小さな波紋 */
.fxa.ripple { width: 88px; height: 88px; bottom: 58px; left: calc(62% - 44px); animation: none; z-index: 2; }   /* 細い輪だけなので、コメントの上に重ねても読める */
.fxa.ripple.slot1 { left: calc(40% - 44px); }
.fxa.ripple > svg circle { fill: none; stroke-width: 4; filter: drop-shadow(0 0 2px rgba(0,0,0,.7)); transform-box: fill-box; transform-origin: 50% 50%; opacity: 0; animation: ring calc(var(--d) * .66) ease-out forwards; animation-delay: calc(var(--d) * var(--i) * .17); }
.fxa.ripple .art { position: absolute; inset: 24%; animation: pop calc(var(--d) * .9) ease-out forwards; }
@keyframes pop { 0% { transform: scale(.3); opacity: 0; } 25% { transform: scale(1.12); opacity: 1; } 40% { transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ring { 0% { transform: scale(.15); opacity: 1; } 60% { opacity: .9; } 100% { transform: scale(1); opacity: 0; } }
/* land:左下(コメント欄の上)の小皿に着地 */
.fxa.land { width: 70px; height: 70px; left: 10px; bottom: 46%; }
.fxa.land.slot1 { left: 86px; }
.fxa.land .plate { position: absolute; left: 2px; right: 2px; bottom: 0; height: 13px; border-radius: 50%; background: radial-gradient(ellipse at 50% 40%, #fff 0 35%, var(--c1) 36% 65%, var(--c2) 66%); box-shadow: 0 3px 6px rgba(0,0,0,.45); }
.fxa.land .item { position: absolute; left: 12px; right: 12px; bottom: 6px; height: 44px; animation: drop calc(var(--d) * .78) forwards; }
@keyframes drop { 0% { transform: translateY(-56px); opacity: 0; animation-timing-function: ease-in; } 12% { opacity: 1; } 45% { transform: translateY(0); animation-timing-function: ease-out; } 60% { transform: translateY(-10px); animation-timing-function: ease-in; } 74% { transform: translateY(0); animation-timing-function: ease-out; } 84% { transform: translateY(-3px); } 100% { transform: translateY(0); } }
/* lightup:左下に並んだものが 1 つずつ灯る(少し揺れる) */
.fxa.lightup { left: 8px; bottom: 46%; min-width: 150px; display: flex; justify-content: space-around; align-items: flex-end; gap: 4px; }
.fxa.lightup.hang { height: 80px; align-items: flex-start; }
.fxa.lightup .cord { position: absolute; left: 0; right: 0; top: -4px; height: 12px; border-bottom: 2px solid var(--on-video-sub); border-radius: 0 0 50% 50%; }
.fxa.lightup .one { width: var(--w, 34px); margin-top: 4px; transform-origin: 50% 100%; animation: popin .35s ease-out both; animation-delay: calc(var(--d) * var(--i) * .2); }
.fxa.lightup.hang .one { transform-origin: 50% 0; animation: sway calc(var(--d) * .45) ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.25s); }
.fxa.lightup .one svg, .fxa.burst .main svg, .fxa.burst .y svg, .fxa.lightup .one img.pa, .fxa.burst .main img.pa, .fxa.burst .y img.pa { height: auto; }
@keyframes popin { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sway { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
.fxa.lightup .one svg, .fxa.lightup .one img.pa { filter: brightness(.45) saturate(.6); animation: lit .3s ease-out forwards; animation-delay: calc(var(--d) * (.08 + var(--i) * .2)); }
.fxa.lightup .glow { opacity: 0; animation: glow .3s ease-out forwards; animation-delay: calc(var(--d) * (.08 + var(--i) * .2)); }
@keyframes lit { to { filter: brightness(1.05) drop-shadow(0 0 6px var(--c2)); } }
@keyframes glow { to { opacity: .85; } }
/* 絵の中の class:hop 波などから跳ねる / up 下から昇る / piece 飛ばすときはこれだけを見せる */
.fxa .hop { transform-box: fill-box; transform-origin: 50% 100%; animation: hop calc(var(--d) * .55) ease-out both; animation-delay: calc(var(--d) * (.08 + var(--i, 0) * .2)); }
@keyframes hop { 0% { transform: translateY(70%) rotate(10deg); opacity: 0; } 15% { opacity: 1; } 55% { transform: translateY(-22%) rotate(-6deg); } 80% { transform: translateY(4%); } 100% { transform: none; opacity: 1; } }
.fxa .up { transform-box: fill-box; animation: upin calc(var(--d) * .5) ease-out both; animation-delay: calc(var(--d) * .12); }
@keyframes upin { from { transform: translateY(110%); } to { transform: none; } }
.fxa .bit svg:has(.piece) > :not(.piece), .fxa.arc .y svg:has(.piece) > :not(.piece) { display: none; }
/* burst:上の角に線の花火(2〜3 発) */
.fxa.burst { inset: 0; animation: none; }
.fxa.burst .one { position: absolute; width: 116px; height: 116px; right: 4%; top: 9%; opacity: 0; animation: burst calc(var(--d) * .56) ease-out forwards; animation-delay: calc(var(--d) * var(--i) * .2); }
.fxa.burst .one:nth-child(2) { right: 36%; top: 6%; width: 84px; height: 84px; }   /* 左上は名札があるので、右上にまとめる */
.fxa.burst .one:nth-child(3) { right: 20%; top: 20%; width: 76px; height: 76px; }
.fxa.burst .one > svg line { stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 30; stroke-dashoffset: 30; animation: draw calc(var(--d) * .26) ease-out forwards; animation-delay: calc(var(--d) * var(--i) * .2); }
@keyframes burst { 0% { opacity: 0; transform: scale(.9); } 8% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; transform: scale(1); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
/* burst の arc:上の帯を、左から右へ弧を描いて横切る(1 つずつ少し遅れて) */
.fxa.burst.arc .one:nth-child(n) { position: absolute; left: -24%; right: auto; top: calc(7% + var(--i) * 5%); width: var(--w, 44px); height: auto; opacity: 1; animation: arcx calc(var(--d) * .7) linear both; animation-delay: calc(var(--d) * var(--i) * .07); }
.fxa.burst.arc .y { animation: arcy calc(var(--d) * .7) ease-in-out both; animation-delay: inherit; filter: drop-shadow(0 2px 3px rgba(0,0,0,.45)); }
@keyframes arcx { 0% { left: -24%; opacity: 0; } 10% { opacity: 1; } 88% { opacity: 1; } 100% { left: 104%; opacity: 0; } }
@keyframes arcy { 0% { transform: translateY(40px) rotate(-12deg); } 50% { transform: translateY(-14px) rotate(0); } 100% { transform: translateY(36px) rotate(12deg); } }
/* burst の drift・rise:右上に絵、drift は小さなもの(piece)が両わきを舞い落ちる(真ん中は通らない) */
.fxa.burst .main { position: absolute; right: 3%; top: 8%; width: var(--w, 110px); animation: fxfade var(--d) linear forwards; filter: drop-shadow(0 0 1.5px var(--video-outline)) drop-shadow(0 2px 4px rgba(0,0,0,.45)); }
.fxa.burst.drift .bit { position: absolute; top: 4%; width: 84px; opacity: 0; animation: fall calc(var(--d) * .62) linear forwards; animation-delay: calc(var(--d) * var(--i) * .035); }
.fxa.burst.drift .bit .y { animation: flutter .5s ease-in-out infinite alternate; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
@keyframes fall { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translate(calc(var(--dx) * 26px), 36vh); opacity: 0; } }
@keyframes flutter { from { transform: rotate(-35deg) scaleX(1); } to { transform: rotate(35deg) scaleX(.7); } }
/* build:左下に下から建つ(石垣 → 屋根 → 旗)。高さは画面の 3 分の 1 まで。最後に名前の札 */
.fxa.build { left: 6px; bottom: 46%; width: min(40%, 190px); max-height: 33%; display: flex; flex-direction: column; align-items: center; }
.fxa.build .art { width: 100%; aspect-ratio: 200 / 220; }
.fxa.build .b1, .fxa.build .b2, .fxa.build .b3 { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); animation: bup calc(var(--d) * .16) ease-out forwards; }
.fxa.build .b1 { animation-delay: calc(var(--d) * .04); }
.fxa.build .b2 { animation-delay: calc(var(--d) * .2); }
.fxa.build .b3 { animation-delay: calc(var(--d) * .34); }
.fxa.build .b4 { opacity: 0; animation: fadein .2s ease-out forwards; animation-delay: calc(var(--d) * .5); }
.fxa.build .flag { transform-box: fill-box; transform-origin: 0 50%; animation: wave .5s ease-in-out infinite alternate; }
@keyframes bup { to { transform: scaleY(1); } }
@keyframes fadein { to { opacity: 1; } }
@keyframes wave { from { transform: skewY(-6deg) scaleX(.92); } to { transform: skewY(5deg) scaleX(1); } }
.fxa.build .plate { margin-top: 2px; max-width: 100%; background: var(--scrim-strong); border: 1px solid var(--c2); color: var(--on-video); font-weight: 800; font-size: 14px; padding: 3px 10px; border-radius: 999px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; animation: plate .3s ease-out forwards; animation-delay: calc(var(--d) * .58); }
@keyframes plate { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.fxcards { position: absolute; left: 10px; top: 88px; right: 90px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; pointer-events: none; }
.gcard { max-width: 100%; background: var(--scrim-strong); color: var(--on-video); border-left: 3px solid var(--accent2); padding: 5px 10px; border-radius: 0 12px 12px 0; font-size: 13px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gcard b { font-size: 15px; }
.gcard small, .gcard .gn { color: var(--on-video-sub); font-size: 11px; }
.gcard .x { color: var(--video-hi); font-weight: 800; font-size: 15px; text-shadow: 0 0 2px var(--video-outline); }
.gcard.away { border-left-color: var(--ok); }
/* 名札「○○さん 👏 ×N」:名前をいちばん読みやすく、ギフト名は小さく */
.gtag { max-width: 100%; display: flex; align-items: center; gap: 4px; padding: 4px 12px 4px 10px; border-radius: 0 999px 999px 0; background: var(--scrim-strong); color: var(--on-video); border-left: 3px solid var(--accent); white-space: nowrap; overflow: hidden; animation: tagin .25s ease-out; }
.gtag.b { background: var(--gift-line); border-left-color: var(--warn); }
.gtag .nm { font-size: 16px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; max-width: 9em; }
.gtag small { font-size: 12px; color: var(--on-video-sub); margin-right: 4px; }
.gtag .i { font-size: 20px; line-height: 1; }
.gtag .gn { font-size: 11px; color: var(--on-video-sub); }
/* 連続の数:どのテーマ・どんな映像(白い壁も)でも読めるよう、自分の濃い下地とふちを持つ */
.gtag .x { margin-left: 4px; padding: 0 6px; border-radius: 999px; background: var(--scrim-strong); font-size: 18px; font-weight: 900; color: var(--video-hi); font-style: italic; text-shadow: 0 0 2px var(--video-outline); }
.gtag .x i { font-style: inherit; display: inline-block; }
.gtag.bump .x i { animation: bump .3s ease-out; }
.gcard .i { font-size: 18px; margin: 0 2px 0 4px; }
img.i { display: inline-block; width: 1.25em; height: 1.25em; object-fit: contain; vertical-align: -.3em; }
.gtag img.i { width: 24px; height: 24px; font-size: inherit; }
.gcard img.i { width: 20px; height: 20px; }
.chat .m img.i { width: 20px; height: 20px; margin: 0 2px; }
@keyframes tagin { from { transform: translateX(-24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes bump { 0% { transform: scale(1.5); } 100% { transform: scale(1); } }
/* 「演出を控えめ」はテーマの動き(LIVE の光など)より優先。端末(Windows など)の動きを減らす設定は見ない */
.reduce .gtag, .reduce .gtag .x i, .reduce .live-badge, .reduce .fav .av { animation: none !important; }
/* ---- 下から出る画面(ギフト・テーマ・設定)。テーマのパネル色 ----
   型:上に「見出し + ✕ 閉じる」(.shead。動かない)・中身だけ動く(.sbody)・決めるボタンがあるものだけ下に固定(.sfoot) */
.sheet { position: absolute; left: 0; right: 0; bottom: 0; background: var(--panel); color: var(--text); border-radius: calc(var(--radius) + 4px) calc(var(--radius) + 4px) 0 0; padding: 0; box-shadow: var(--shadow); border-top: 1px solid var(--line); max-height: 75%; display: flex; flex-direction: column; overflow: hidden; }
.shead { flex: none; display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 14px; border-bottom: 1px solid var(--line); }
.sheet h3 { margin: 0; font-size: 16px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sbody { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 10px 14px 18px; }
.sfoot { flex: none; padding: 8px 14px 12px; border-top: 1px solid var(--line); }
/* ✕ 閉じる(押せる所は 44px 角) */
.sx { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 44px; min-height: 44px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel2); color: var(--text); font: inherit; font-size: 14px; cursor: pointer; }
.sx span { font-size: 13px; }
.sheet .note { font-size: 12px; color: var(--warn-text); margin-bottom: 10px; }
.sgrp { margin: 14px 0 2px; padding-bottom: 4px; font-size: 13px; color: var(--sub); border-bottom: 2px solid var(--line); }
.sgrp:first-child { margin-top: 0; }
.netinfo { margin-top: 10px; border: 1px solid var(--line); border-radius: var(--radius-s); padding: 0 10px; }
.netinfo summary { cursor: pointer; padding: 10px 0; font-size: 14px; }
.gsheet { max-height: 74%; }
.gsheet .note { margin-bottom: 8px; }
.grecent { margin-bottom: 8px; }
.grecent .lbl { font-size: 12px; color: var(--sub); margin-bottom: 4px; }
.grecent .rrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.grecent button { padding: 4px 2px 3px; }
.grecent button img { width: 30px; height: 30px; }
.grecent .badge { display: none; }
.gtabs { display: flex; gap: 6px; margin-bottom: 8px; }
.gtabs button { flex: 1; padding: 7px 0; border-radius: 999px; background: var(--panel2); color: var(--text); border: 1px solid var(--line); font-size: 14px; }
.gtabs button[aria-selected="true"] { background: var(--tab-on-bg); color: var(--tab-on-text); border-color: var(--tab-on-bg); font-weight: 800; }
.giftgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 6px 2px 4px; align-content: start; }
@media (max-width: 359px) { .giftgrid { grid-template-columns: repeat(3, 1fr); } }
.giftgrid button, .grecent button { position: relative; background: var(--panel2); color: var(--text); border: 2px solid var(--line); border-radius: var(--radius-s); padding: 8px 2px 6px; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; transition: border-color .2s var(--ease), background .2s var(--ease); }
.giftgrid button img, .grecent button img { width: 44px; height: 44px; object-fit: contain; filter: var(--art-shadow); }
/* 値段の段の印(控えめ):Ⅳ(1,600pt〜)は細い銀、Ⅴ(8,000pt〜)は金のふちと、ほんのり金の地。テーマの線と地の色に混ぜる */
.giftgrid button.g4 { border-color: color-mix(in srgb, #c3ccd8 55%, var(--line)); box-shadow: inset 0 0 0 1px color-mix(in srgb, #e8edf3 22%, transparent); }
.giftgrid button.g5 { border-color: color-mix(in srgb, #d9ae4f 65%, var(--line));
  background: linear-gradient(180deg, color-mix(in srgb, #e2b04a 12%, var(--panel2)), var(--panel2) 70%); box-shadow: inset 0 0 0 1px color-mix(in srgb, #f3d58a 28%, transparent); }
.giftgrid button.g4[aria-pressed="true"], .giftgrid button.g5[aria-pressed="true"] { border-color: var(--sel-line); background: var(--sel-bg); }
.grecent button img { width: 30px; height: 30px; }
/* 名前は 2 行まで(「…」で切らない。最近使ったは 1 行) */
.giftgrid button .nm { font-size: 11px; line-height: 1.25; max-width: 100%; min-height: 2.5em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all; text-align: center; }
.grecent button .nm { font-size: 11px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.giftgrid button .pt, .grecent button .pt { font-size: 10px; color: var(--sub); }
/* 選んでいるものは、枠の色だけでなく、地の色と ✓ の印でも分かるように */
.giftgrid button[aria-pressed="true"], .grecent button[aria-pressed="true"] { border-color: var(--sel-line); background: var(--sel-bg); color: var(--on-sel); box-shadow: 0 0 0 1px var(--sel-line); }
.giftgrid button[aria-pressed="true"]::after, .grecent button[aria-pressed="true"]::after { content: "✓"; position: absolute; left: 4px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--sel-line); color: var(--panel); font-size: 12px; font-weight: 900; line-height: 18px; text-align: center; }
.giftgrid .badge { position: absolute; top: -6px; right: -3px; font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 999px; background: var(--live); color: var(--on-live); white-space: nowrap; }
.giftgrid .badge.lim { background: var(--tab-on-bg); color: var(--tab-on-text); right: auto; left: 50%; transform: translateX(-50%); }
.gempty { grid-column: 1 / -1; text-align: center; color: var(--sub); padding: 24px 0; font-size: 13px; }
.gsend .btn { width: 100%; justify-content: center; padding: 10px 14px; font-size: 16px; white-space: normal; text-align: center; }   /* 選んだギフトの絵・正式名・pt を全部出す */
.gsend .btn:disabled { background: var(--panel2); color: var(--sub); border: 1px solid var(--line); font-weight: 400; cursor: default; box-shadow: none; }
.gsend .btn img.i { width: 26px; height: 26px; }
.gsend .btn small { font-weight: 400; opacity: .9; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.row:last-child { border-bottom: 0; }
.row .k { color: var(--sub); }
.row select, .row input[type=text] { background: var(--panel2); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 5px 8px; }
.switch { position: relative; width: 46px; height: 26px; border-radius: 999px; background: var(--line); flex: none; transition: background .2s var(--ease); }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--panel); transition: left .2s var(--ease); }
.switch.on { background: var(--accent); }
.switch.on::after { left: 23px; }
.meter { display: flex; height: 10px; border-radius: 6px; overflow: hidden; background: var(--line); margin: 6px 0 2px; }
.meter i { display: block; height: 100%; }
.legend { display: flex; gap: 12px; font-size: 12px; color: var(--sub); }
.legend b { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.qual { position: absolute; top: 54px; right: 10px; }
.toast { position: absolute; left: 50%; top: 100px; transform: translateX(-50%); background: var(--scrim-strong); color: var(--on-video); padding: 8px 14px; border-radius: 18px; font-size: 13px; width: max-content; max-width: calc(100% - 24px); text-align: center; pointer-events: none; }   /* 場所は watch.js の placeToast */
.audioonly { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: radial-gradient(circle at 50% 40%, var(--panel2), var(--stage)); color: var(--on-video); }
.audioonly .msg { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 86%; text-align: center; padding: 14px 18px; border-radius: var(--radius); background: var(--scrim-strong); color: var(--on-video); }   /* 明るいテーマでも文字は濃い下地の上 */
.audioonly .msg small { color: var(--on-video-sub); }
.audioonly .wave { font-size: 54px; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.15); opacity: .7; } }
.reduce .heart { animation-duration: .01s !important; }

/* ギフトの一覧は画面の下 44% まで。開いている間も配信(映像・演出・コメント)が見えるように、演出とコメントを一覧の上へずらす(2026-10-21 オーナー「配信かくれてる」) */
.gsheet { max-height: 44%; }
.gsheet h3 { font-size: 15px; }
.gsheet .sbody { padding: 8px 12px 6px; }
.gsheet .sfoot { padding: 6px 12px 8px; }
.gsheet .gtabs { position: sticky; top: -8px; z-index: 1; margin: 0 -12px 6px; padding: 6px 12px; background: inherit; }   /* 一覧を動かしても種類のタブは上に残る */
.gbody { background: inherit; }
.gsheet .note { font-size: 11px; margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gsheet .grecent { margin-bottom: 6px; }
.gsheet .grecent .rrow { grid-template-columns: repeat(6, 1fr); }
.gsheet .grecent button img { width: 24px; height: 24px; }
.gsheet .gtabs button { padding: 5px 0; font-size: 13px; }
.gsheet .giftgrid { grid-template-columns: repeat(4, 1fr); gap: 6px; }   /* スマホは 4 列(名前を 2 行まで出す) */
.gsheet .giftgrid button { padding: 5px 1px 4px; }
.gsheet .giftgrid button img { width: 34px; height: 34px; }
@media (max-width: 359px) { .gsheet .giftgrid { grid-template-columns: repeat(3, 1fr); } }
.stage:has(#giftSheet:not(.hidden)) .fx { bottom: 44%; }
.stage:has(#giftSheet:not(.hidden)) .chat { bottom: calc(44% + 8px); max-height: 22%; }
.stage:has(#giftSheet:not(.hidden)) .side { visibility: hidden; }