/* 参加型動画のエンジンの見た目（participatory-film スキルのひな形）。案件の色・書体は site.css の :root で上書きする
   決まり：中身は舞台（--st〜--sb）の中、文字は画面の相対（rem）、横置きは html.land、CV は浮かせて光らせる */
:root{
  --acc: #e50819;            /* CV（購入・応募）の色 */
  --acc-shadow: 150 0 10;    /* CV の影の色（rgb） */
  --acc-ink: #fff;           /* CV の文字の色 */
  --ui: #e50819;             /* メニューの丸・参加の印 */
  --ink: #2d2d2d; --gray: #5c5c5c; --paper: #fff;
  --f: "Noto Sans JP", sans-serif;
  --ease-out: cubic-bezier(.16,1,.3,1); --ease-in: cubic-bezier(.7,0,.84,0); --ease-move: cubic-bezier(.2,0,0,1);
  --dur-press: 100ms; --dur-ui: 240ms;
  --safe-t: max(env(safe-area-inset-top), 10px); --safe-b: max(env(safe-area-inset-bottom), 10px);
  --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px);
  --st: 64px; --sb: 140px; --sh: 600px; --vh: 100vh;   /* 舞台（engine.js の sizeStage が実測で上書き） */
  --side: 8%;
}
/* 文字は画面の相対：幅 375 で 16px と高さ 640 で 16px の小さい方。横置きは大きめ */
html{ font-size: clamp(12px, min(calc(100vw * 16 / 375), calc(var(--vh) * 16 / 640)), 22px); }
html.land{ font-size: clamp(12px, min(calc(100vw * 16 / 600), calc(var(--vh) * 16 / 320)), 20px); }
.land{ --side: max(15vw, calc(var(--safe-l) + 14px)); --cw: calc(100vw - 2 * var(--side)); --gap: 3.5vw; }   /* 横置きは中央 70% */
*{ box-sizing: border-box; margin: 0; padding: 0; }
html, body{ height: 100%; overflow: hidden; background: var(--paper); }
body{ font-family: var(--f); color: var(--ink); letter-spacing: .04em; -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; touch-action: none; overscroll-behavior: none; }
button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; letter-spacing: inherit; }
img{ display: block; }
[hidden]{ display: none !important; }

/* ── 場面 ── */
#film{ position: fixed; inset: 0; overflow: hidden; }
.scene{ position: absolute; inset: 0; overflow: hidden; display: none; will-change: transform, opacity; }
.scene.on{ display: block; }
.ph{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform; backface-visibility: hidden; }
.ln{ display: block; opacity: 0; will-change: transform, opacity; }
.note, .foot{ display: none; }   /* 注釈は下の帯の右上へ（engine.js の setAnnot） */
#warp, #fx{ position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#warp{ z-index: 1; visibility: hidden; } #fx{ z-index: 2; }

/* ── 上の帯 ── */
.hd{ position: fixed; left: 0; right: 0; top: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center;
  padding: var(--safe-t) 14px 0 var(--side); pointer-events: none; }
.hd-r{ display: flex; align-items: center; gap: 8px; pointer-events: auto; }
.hd-menu{ width: 44px; height: 44px; border-radius: 50%; background: var(--ui); box-shadow: 0 0 0 1.5px rgb(255 255 255 / .9);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.hd-menu i{ width: 16px; height: 2px; background: #fff; border-radius: 1px; }
.land .hd{ padding: calc(var(--safe-t) - 4px) max(14px, calc(var(--safe-r) + 10px)) 0 max(16px, calc(var(--safe-l) + 12px)); }
.land .hd-menu{ width: 36px; height: 36px; }

/* ── 参加ポイントの待ちの札 ── */
.gate{ position: fixed; inset: 0; z-index: 3; pointer-events: none; }
.gate-pill{ position: absolute; left: 50%; bottom: calc(var(--sb) + 14px); transform: translateX(-50%); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 10px; background: #fff; color: var(--ink); font-weight: 700; font-size: .875rem; padding: .7em 1.2em; border-radius: 2em;
  box-shadow: 0 8px 24px -12px rgb(0 0 0 / .45); animation: up 600ms var(--ease-out) both; }
.gate-pill small{ display: block; font-size: .66rem; font-weight: 500; color: var(--gray); margin-top: 2px; letter-spacing: .06em; }
@keyframes up{ from{ opacity: 0; transform: translate(-50%,12px); } }
.dot{ width: 10px; height: 10px; border-radius: 50%; background: var(--ui); animation: pulse 1.4s infinite; flex: none; }
@keyframes pulse{ 0%{ box-shadow: 0 0 0 0 rgb(var(--acc-shadow) / .5); } 100%{ box-shadow: 0 0 0 10px rgb(var(--acc-shadow) / 0); } }
/* 自動で進むまでの残り：太い線の円（--k＝0〜1 を engine.js が入れる） */
.wait{ --k: 0; width: 1.6rem; height: 1.6rem; border-radius: 50%; display: inline-block; flex: none; margin-left: 4px;
  background: conic-gradient(var(--ui) calc(var(--k) * 1turn), #e6e6e6 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4.5px)); }
.wait i{ display: none; }
.land .gate-pill{ bottom: calc(var(--sb) + 8px); }

/* ── 再生前・終わり ── */
.poster{ position: fixed; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding-top: calc(var(--vh) * .16);
  background: radial-gradient(60% 40% at 50% 58%, rgb(0 0 0 / .3), rgb(0 0 0 / 0) 70%); transition: opacity 700ms var(--ease-move); }
body:not([data-state="poster"]) .poster{ opacity: 0; pointer-events: none; }
.play{ width: 5.2rem; height: 5.2rem; border-radius: 50%; background: var(--acc); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 30px -10px rgb(var(--acc-shadow) / .7); animation: breathe 2.4s var(--ease-move) infinite; }
.play svg{ width: 40%; fill: #fff; margin-left: 6%; }
@keyframes breathe{ 50%{ box-shadow: 0 10px 30px -10px rgb(var(--acc-shadow) / .7), 0 0 0 14px rgb(var(--acc-shadow) / .18); } }
.poster-t{ display: flex; flex-direction: column; align-items: center; gap: 6px; color: #fff; font-weight: 700; font-size: 1rem; letter-spacing: .14em; text-shadow: 0 1px 10px rgb(0 0 0 / .45); }
.poster-t small{ font-weight: 400; font-size: .69rem; color: rgb(255 255 255 / .85); letter-spacing: .1em; }
.flash{ position: fixed; left: 50%; top: 45%; width: 64px; height: 64px; margin: -32px; border-radius: 50%; z-index: 3; pointer-events: none; background: rgb(0 0 0 / .35) center / 26px no-repeat; opacity: 0; }
.flash.go{ animation: flash 700ms var(--ease-out); }
.flash.pause{ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M7 5h3.5v14H7zM13.5 5H17v14h-3.5z'/></svg>"); }
.flash.play{ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M8 5.5v13l10.5-6.5z'/></svg>"); }
@keyframes flash{ 0%{ opacity: 0; transform: scale(.8); } 25%{ opacity: 1; transform: scale(1); } 100%{ opacity: 0; transform: scale(1.15); } }
/* 「もう一度見る」は下の帯の再生ボタンの上に吹き出しで出す（.pp-hint と同じ形）。舞台の CV や商品に掛けない（本人 2026-10-08） */

/* ── 下の帯：プレーヤー＋CV ── */
.dock{ position: fixed; left: 0; right: 0; bottom: 0; z-index: 7; padding: 10px 12px var(--safe-b); background: linear-gradient(to top, rgb(0 0 0 / .4), rgb(0 0 0 / 0)); color: #fff; }
.annot{ position: absolute; right: max(14px, calc(var(--safe-r) + 12px)); bottom: calc(100% + 4px); max-width: min(78%, 520px); text-align: right; font-size: .66rem; line-height: 1.5;
  letter-spacing: .04em; color: #fff; opacity: 0; pointer-events: none; text-shadow: 0 1px 2px rgb(0 0 0 / .6), 0 0 10px rgb(0 0 0 / .4); }
.player{ position: relative; }
.meta{ display: flex; justify-content: space-between; align-items: baseline; font-size: .69rem; letter-spacing: .08em; margin: 0 4px 0 36px; text-shadow: 0 1px 6px rgb(0 0 0 / .5); }
.time{ font-variant-numeric: tabular-nums; } .time b{ font-weight: 500; }
.row{ display: flex; align-items: center; gap: 6px; }
.pp, .snd{ position: relative; width: 32px; height: 32px; flex: none; display: flex; align-items: center; justify-content: center; }
.pp svg{ width: 20px; fill: #fff; } .pp .i-pause{ display: none; }
body[data-state="playing"] .pp .i-pause, body[data-state="waiting"] .pp .i-pause{ display: block; }
body[data-state="playing"] .pp .i-play, body[data-state="waiting"] .pp .i-play{ display: none; }
.snd svg{ width: 20px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .snd svg path:first-child{ fill: #fff; }
.snd[aria-pressed="false"] .w1, .snd[aria-pressed="false"] .w2{ opacity: .2; }
.seek{ position: relative; flex: 1; height: 30px; touch-action: none; cursor: pointer; outline: none; }
.segs{ position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; display: flex; gap: 3px; }
.seg{ position: relative; height: 100%; background: rgb(255 255 255 / .35); border-radius: 2px; overflow: hidden; }
.seg i{ position: absolute; inset: 0; background: #fff; transform-origin: 0 50%; transform: scaleX(0); }
.seek.drag .segs{ height: 5px; margin-top: -2.5px; }
.marks{ position: absolute; inset: 0; pointer-events: none; }
.mark{ position: absolute; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--ui); box-shadow: 0 0 0 1.5px #fff; }
.mark.branch{ border-radius: 2px; transform: rotate(45deg); }
.mark.done{ background: #fff; box-shadow: 0 0 0 1.5px var(--ui); }
.knob{ position: absolute; top: 50%; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgb(0 0 0 / .3); }
.conv{ display: flex; gap: 8px; margin-top: 6px; }
.cp-pill{ flex: 1; min-width: 0; height: 46px; border-radius: 23px; border: 1.5px solid #fff; background: rgb(255 255 255 / .12); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  display: flex; align-items: center; gap: 8px; padding-left: 4px; overflow: hidden; color: #fff; }
.cp-pill .tag{ flex: none; height: 34px; padding: 0 12px; border-radius: 17px; background: var(--ui); color: #fff; font-size: .69rem; font-weight: 800; white-space: nowrap; display: flex; align-items: center; }
.cp-pill .mq{ flex: 1; overflow: hidden; white-space: nowrap; font-size: .8rem; font-weight: 700; }
.cp-pill .mq span{ display: inline-block; animation: mq 14s linear infinite; }
@keyframes mq{ to{ transform: translateX(-50%); } }
/* CV：動画の中でも浮かせて光らせる。押すと沈む */
.cta{ position: relative; overflow: hidden; flex: none; height: 46px; padding: 0 18px; border-radius: 23px; background: var(--acc); color: var(--acc-ink); font-weight: 800; font-size: .875rem;
  display: flex; align-items: center; gap: 6px; box-shadow: 0 10px 22px -8px rgb(var(--acc-shadow) / .75), 0 3px 6px -2px rgb(0 0 0 / .25);
  transition: transform var(--dur-press) var(--ease-out), box-shadow var(--dur-ui); }
.cta svg{ width: 17px; fill: var(--acc-ink); }
.cta::before, .cv::before{ content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; background: linear-gradient(100deg, transparent, rgb(255 255 255 / .55), transparent);
  transform: skewX(-20deg); animation: shine 3.2s var(--ease-move) infinite; }
@keyframes shine{ 0%, 55%{ left: -60%; } 85%, 100%{ left: 120%; } }
.cta:active, .cv:active{ transform: scale(.97); box-shadow: 0 4px 10px -6px rgb(var(--acc-shadow) / .75); }
.cta.bump{ animation: bump 700ms var(--ease-out); } @keyframes bump{ 30%{ transform: scale(1.08); } }
.cp-pill:active{ transform: scale(.97); }
/* 場面の中の CV（投稿はこちら・応募する） */
.cv{ position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--acc); color: var(--acc-ink); text-decoration: none; font-weight: 800;
  border-radius: 2em; padding: .8em 1.6em; box-shadow: 0 10px 22px -8px rgb(var(--acc-shadow) / .75), 0 3px 6px -2px rgb(0 0 0 / .25); transition: transform var(--dur-press) var(--ease-out); }
/* 横置き：シークバーと CV を1行に */
.land .dock{ display: flex; align-items: center; gap: 14px; padding: 6px max(12px, calc(var(--safe-r) + 10px)) var(--safe-b) max(12px, calc(var(--safe-l) + 10px)); }
.land .player{ flex: 1; min-width: 0; } .land .conv{ flex: 0 0 auto; width: min(46%, 420px); margin-top: 0; }
.land .cp-pill, .land .cta{ height: 42px; }

/* 止めたまま触られないとき：再生ボタンを指すラベルと波紋 */
.pp-hint{ position: absolute; left: -6px; bottom: 38px; z-index: 2; background: #fff; color: var(--ink); font-weight: 700; font-size: .8rem; letter-spacing: .08em; padding: .6em 1em; border-radius: 1.2em;
  box-shadow: 0 8px 20px -10px rgb(0 0 0 / .5); white-space: nowrap; animation: hintIn 500ms var(--ease-out) both, hintBob 1.6s 500ms var(--ease-move) infinite alternate; }
.pp-hint::after{ content: ""; position: absolute; left: 12px; top: 100%; border: 7px solid transparent; border-top-color: #fff; }
@keyframes hintIn{ from{ opacity: 0; transform: translateY(8px) scale(.95); } } @keyframes hintBob{ to{ transform: translateY(-4px); } }
body.ask-play .pp::after{ content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #fff; animation: ppRing 1.4s var(--ease-out) infinite; }
@keyframes ppRing{ 0%{ transform: scale(.7); opacity: .9; } 100%{ transform: scale(1.6); opacity: 0; } }

/* ── シート ── */
.sheet{ position: fixed; inset: 0; z-index: 9; background: rgb(0 0 0 / .45); display: flex; align-items: flex-end; animation: fade 240ms var(--ease-out); }
@keyframes fade{ from{ opacity: 0; } }
.sheet-in{ width: 100%; max-height: 88%; overflow: auto; background: #fff; border-radius: 18px 18px 0 0; padding: 0 18px calc(var(--safe-b) + 18px); animation: sheet 420ms var(--ease-out);
  touch-action: pan-y; -webkit-user-select: text; user-select: text; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
@keyframes sheet{ from{ transform: translateY(100%); } }
.sheet header{ position: sticky; top: 0; z-index: 1; background: inherit; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0 10px; border-bottom: 1px solid #eee; }
.sheet header b{ font-size: .95rem; }
.x-btn{ flex: none; width: 36px; height: 36px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px -6px rgb(0 0 0 / .5); }
.x-btn svg{ width: 18px; height: 18px; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; fill: none; }
.land .sheet-in{ max-width: 640px; margin: 0 auto; }
.menu{ list-style: none; }
.menu button{ width: 100%; display: flex; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid #eee; font-size: .94rem; font-weight: 700; text-align: left; }
.menu button span{ color: var(--gray); font-weight: 400; font-size: .75rem; }
.terms{ font-size: .8rem; line-height: 1.8; color: #454545; padding-top: 10px; }
.terms h3, .terms h4{ font-size: .875rem; margin: 16px 0 4px; color: var(--ink); }
.terms ul, .terms ol{ padding-left: 1.2em; }
/* 見えないが読める（見えない h1・ナレーションの書き起こし。検索と読み上げのため。tools/seo.mjs が書く） */
.vh{ position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
@media (prefers-reduced-motion: reduce){ .dot, .cp-pill .mq span, .cta::before, .cv::before, .play{ animation: none; } }

/* 最初の画面の「音 ON / OFF」（選ぶだけで再生は始めない。下の帯の音のボタンと同じ状態） */
.poster{ cursor: pointer; }
.poster-snd{ display: flex; padding: 3px; margin-top: 2px; border-radius: 2em; background: rgb(0 0 0 / .3); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.poster-snd button{ display: flex; align-items: center; gap: .4em; padding: .55em 1.05em; border-radius: 2em; color: #fff; font-weight: 700; font-size: .78rem; letter-spacing: .08em; transition: background-color 200ms, color 200ms; }
.poster-snd button[aria-pressed="true"]{ background: #fff; color: #222; box-shadow: 0 4px 10px -6px rgb(0 0 0 / .5); }
.poster-snd svg{ width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.poster-snd svg .b{ fill: currentColor; stroke-width: 1.4; }