/* =====================================================================
   divID オーバーレイ 共通テーマ v3「テロップ帖」  /tp/theme.css  (2026-09-27 A案 決定)
   元 = /_lab/design/final/theme.css 。/_next/ の70本はこれを読む(本番 /theme.css は未変更)。
   ひとこと: 箱を捨てて、文字とベタ色だけを画面に置く。

   決まり(破ると「AIで作った感」に戻る)
   1. 半透明・すりガラス・ぼかし光・グラデ文字・英字の小見出し・絵文字・%・頭文字の丸 は使わない
   2. ズレ影(ぼかし0)は 1画面に1つ = 今いちばん見せたい物(.hero)だけ。常時出ている部品は影なし
   3. 同時に出す常時部品は3つまで。画面の縦 25〜60% (顔の帯) には常時の部品を置かない
   4. 色の役: ピンク=人・ギフト / 緑=進み・個数 / 黒=縁と溝 / 白=文字の芯 / 生成り=紙物(テープ・札・チケット)だけ
      ピンクと緑は直接くっつけない(間に黒か白)。2色をグラデでつながない
   5. 動きは transform / opacity だけ。出方は「ポン」「ワイプ」「ペタッ」「ハンコ」の4つだけ
   6. 文字は最小14px、名前と数は18px以上。ダイヤ数・合計は出さない
   部品のHTMLは /tp/telop.js (Telop.*) で作る。お祝いは /tp/fx.js (FX.*)。
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&family=M+PLUS+Rounded+1c:wght@700;900&display=swap');
/* 見出し・数=Dela Gothic One / 名前・ことば=M PLUS Rounded 1c 900。Outfit・Noto Sans JP は使わない */

:root{
  /* ---- 色 ---- */
  --pk:#e6007e;        /* divID マゼンタ(公式) */
  --pk-l:#ff4fa8;      /* 黒の上に置くピンク文字 */
  --gr:#00a35a;        /* divID の緑(既製の #10b981 はやめる) */
  --gr-l:#27d67f;      /* 黒の上に置く緑文字 */
  --k:#151015;         /* 縁・溝・黒帯(少し赤みのある墨) */
  --w:#ffffff;
  --paper:#fff6e3;     /* 生成り = 紙物だけに使う */
  --tape:#cdeedb;      /* マステ(緑を紙に薄く) */

  /* ---- 書体 ---- */
  --f-head:'Dela Gothic One','M PLUS Rounded 1c',sans-serif;   /* 見出し・数 */
  --f-body:'M PLUS Rounded 1c','Hiragino Maru Gothic ProN',sans-serif;  /* 名前・ことば */

  /* ---- 影は1種類だけ(主役専用) ---- */
  --drop:4px 4px 0 var(--k);
  --drop-pk:4px 4px 0 var(--pk);

  /* ---- 動き ---- */
  --e-pon:cubic-bezier(.3,1.7,.5,1);
  --e-snap:cubic-bezier(.05,.9,.12,1);
  --e-out:cubic-bezier(.6,0,.8,.4);

  /* ---- 置き場所(縦の帯)。部品は top帯 / low帯 にだけ置く ---- */
  --band-top:11.5%;    /* TikTok の配信者名の下から */
  --band-face:25%;     /* ここから 60% までは空ける */
  --band-low:60%;
  --gutter:12px;       /* LIVE Studio(1080x1920) では 40px 相当(スマホで左右が切れる分) */

  /* ---- 今の theme.css の変数(ページ内の style が使っている)を新しい色に付け替え ---- */
  --bg:#151015; --panel:#151015; --panel-2:#151015; --line:#151015; --hi:transparent;
  --brand:#00a35a; --brand-l:#27d67f; --brand-ll:#27d67f; --brand-d:#00602f;
  --magenta:#e6007e; --magenta-l:#ff4fa8; --gold:#ff4fa8;
  --ink:#ffffff; --ink-dim:#ffffff; --ink-faint:#ffffff;
  --radius:6px; --radius-sm:4px; --blur:none; --shadow:none; --glow:none;
  --font:var(--f-body); --num:var(--f-head);
  --safe-bottom:0px; --safe-right:0px;
}
html[data-orient="portrait"]{ --safe-bottom:230px; --safe-right:96px; }

/* =====================================================================
   ★ クラス名はぜんぶ tp- 始まり(ページの .g .c .on .tl .tag 等とぶつからないように。
     見本 final の .tl .g .hero .pon … は、ここでは .tp-tl .tp-g .tp-hero .tp-pon … になる)
   ===================================================================== */

/* 1) テロップ文字 .tp-tl … 外縁黒 / 中縁色 / 白い芯 の3枚。主役(.tp-hero)だけズレ影を足して4枚
      HTML は Telop.h('文字','p|g|k', px, 'hero r') で作る */
.tp-tl{display:inline-grid;vertical-align:middle;font-family:var(--f-head);font-weight:400;font-style:normal;
  font-size:max(18px,var(--sz,24px));line-height:1.2;letter-spacing:.02em;white-space:nowrap;text-transform:none;
  --mid:var(--pk);--o:.36em;--m:.18em;padding:0 .08em;background:none;text-shadow:none;position:relative}
.tp-tl>i{grid-area:1/1;font-style:normal;position:relative;display:block;background:none;text-shadow:none;margin:0;padding:0}
.tp-tl>i.tp-s{color:var(--k);-webkit-text-stroke:var(--o) var(--k);left:max(3px,.1em);top:max(3px,.1em)}
.tp-tl>i.tp-o{color:var(--k);-webkit-text-stroke:var(--o) var(--k)}
.tp-tl>i.tp-m{color:var(--mid);-webkit-text-stroke:var(--m) var(--mid)}
.tp-tl>i.tp-c{color:var(--w);-webkit-text-stroke:0}
.tp-tl.tp-g{--mid:var(--gr)}
.tp-tl.tp-k{--mid:var(--k);--o:.3em;--m:.3em}       /* 白芯＋黒縁だけ(帯の上) */
.tp-tl.tp-r{font-family:var(--f-body);font-weight:900} /* 名前は丸ゴシック極太 */

/* 1b) 題(ページの名前) .telop-title … 全ページこの型1つ(Telop.title)。ピンクの縁取りテロップ・影なし。
       補足は生成りの札(.tp-tag)、黒い帯(.tp-zb.tp-b)は名前・ボス名だけに使う */
.telop-title{display:inline-block;flex-shrink:0;line-height:1}

/* 2) 座布団(ベタの帯) .tp-zb … 影なしが基本。.tp-hero の時だけズレ影 */
.tp-zb{display:inline-block;background:var(--pk);border:2.5px solid var(--k);border-radius:4px;padding:2px 11px 3px}
.tp-zb.tp-g{background:var(--gr)}
.tp-zb.tp-b{background:var(--k)}
.tp-zb.tp-sk{transform:skewX(-11deg)}            /* サイドスーパー(平行四辺形) */
.tp-zb.tp-sk>*{display:inline-block;transform:skewX(11deg)}
.tp-zb.tp-hero,.tp-hero>.tp-zb{box-shadow:var(--drop)}
.tp-zb.tp-b.tp-hero{box-shadow:var(--drop-pk)}

/* 3) 紙物: マステ(名前) / 札 / チケット / ハンコ / 花丸 */
.tp-tape{display:inline-block;background:var(--tape);color:var(--k);font:900 max(18px,var(--sz,20px))/1.15 var(--f-body);   /* 名前は18px以上(修正 N2-5) */
  
  padding:3px 14px 4px;white-space:nowrap;max-width:var(--mw,170px);overflow:hidden;text-overflow:ellipsis;
  clip-path:polygon(0 8%,4% 0,2% 30%,5% 52%,1% 76%,4% 100%,96% 100%,100% 84%,97% 60%,100% 38%,96% 16%,99% 0,0 0);
  transform:rotate(var(--tt,-1.5deg))}
.tp-tape.tp-pk{background:#ffd3ea}
.tp-tl,.tp-zb,.tp-tape,.tp-tag,.tp-ticket,.tp-hanko,.tp-gx,.tp-bub,.tp-gimg{flex-shrink:0}   /* 横並びで潰れて「さ…」にならない */
.tp-tag{display:inline-block;background:var(--paper);color:var(--k);border:2.5px solid var(--k);
  border-radius:3px 14px 14px 3px;font:900 max(18px,var(--sz,18px))/1.2 var(--f-body);padding:2px 12px 3px 9px;white-space:nowrap}

.tp-ticket{display:inline-flex;background:var(--gr);border:2.5px solid var(--k);border-radius:6px;color:var(--w);
  transform:rotate(var(--tilt,-2deg))}
.tp-ticket>.tp-main{padding:6px 10px 7px 12px}
.tp-ticket>.tp-stub{border-left:3px dashed var(--k);background:var(--paper);display:grid;place-items:center;padding:0 7px}
.tp-ticket>.tp-stub span{writing-mode:vertical-rl;font:400 18px/1 var(--f-head);color:var(--pk);letter-spacing:.1em}

.tp-hanko{display:inline-grid;place-items:center;padding:4px 10px;border:4px double var(--pk);border-radius:8px;
  background:var(--paper);color:var(--pk);font:400 max(18px,var(--sz,26px))/1 var(--f-head);transform:rotate(-12deg);white-space:nowrap}
.tp-maru{position:absolute;pointer-events:none;overflow:visible}  /* 花丸 SVG (Telop.maru) */

/* 4) バー: 黒い溝＋緑のベタ(地の色なし・斜線なし)。伸びるのは translateX だけ */
.tp-groove{position:relative;height:var(--h,22px);background:var(--k);border:2.5px solid var(--k);border-radius:3px;overflow:hidden}
.tp-groove>.tp-fill{position:absolute;inset:0;background:var(--gr);transform:translateX(calc((var(--p,0) - 1) * 100%));
  transition:transform .45s var(--e-pon)}
.tp-groove.tp-pk>.tp-fill{background:var(--pk)}
.tp-cells{display:flex;gap:3px;height:var(--h,20px);padding:3px;background:var(--k);border-radius:3px}   /* コマ式(HP) */
.tp-cells>b{flex:1;background:var(--pk);transition:opacity .15s,transform .2s var(--e-out)}
.tp-cells>b.tp-lost{opacity:0;transform:translateY(-6px)}

/* ピンク組 vs 緑組(PK・2択) */
.tp-vs{display:flex;height:var(--h,26px);border:2.5px solid var(--k);border-radius:3px;overflow:hidden;background:var(--k)}
.tp-vs>.tp-p{background:var(--pk);flex:var(--a,1)} .tp-vs>.tp-g{background:var(--gr);flex:var(--b,1)}
.tp-vs>.tp-p+.tp-g{border-left:3px solid var(--w)}

/* ギフトの実画像 / 絵×個数 */
.tp-gimg{display:inline-block;width:var(--gs,32px);height:var(--gs,32px);object-fit:contain;vertical-align:middle;flex:none;filter:none}
.tp-gx{display:inline-flex;align-items:center;gap:2px;vertical-align:middle;white-space:nowrap}

/* 吹き出し(手描き線) */
.tp-bub{position:relative;display:inline-block;padding:9px 16px 18px}
.tp-bub>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.tp-bub>span{position:relative;font:900 max(18px,var(--sz,18px))/1.2 var(--f-body);color:var(--k);white-space:nowrap}
.tp-bub em{font-style:normal;color:var(--pk)}

/* 集中線(大きいギフトと達成の時だけ) */
.tp-flines{position:absolute;pointer-events:none}
.tp-flines svg{display:block;width:100%;height:100%}
/* (修正 R6 2026-10-04) 集中線の外側はぼかして消す(箱の辺を見せない) */
.tp-flines{-webkit-mask-image:radial-gradient(closest-side,#000 80%,transparent 100%);mask-image:radial-gradient(closest-side,#000 80%,transparent 100%)}

/* 5) 出方は4つだけ(ポン・ワイプ・ペタッ・ハンコ) ＋ 集中線・揺れ・擬音 */
@keyframes tp-pon{0%{transform:scale(0)}65%{transform:scale(1.15)}100%{transform:scale(1)}}
/* (修正 R10 10/05) ワイプは画面の外から滑らせず、その場で左→右に開く(撮った途中の絵でも左端で名前が切れない) */
@keyframes tp-wipe{from{clip-path:inset(-40px 100% -40px -40px)}to{clip-path:inset(-40px -40px -40px -40px)}}
@keyframes tp-wipeout{from{clip-path:inset(-40px -40px -40px -40px)}to{clip-path:inset(-40px -40px -40px 100%)}}
@keyframes tp-peta{0%{opacity:0;transform:rotate(calc(var(--tilt,0deg) + 9deg)) scale(1.35)}
  50%{opacity:1;transform:rotate(calc(var(--tilt,0deg) - 2deg)) scale(.95)}100%{opacity:1;transform:rotate(var(--tilt,0deg))}}
@keyframes tp-hanko{0%{opacity:0;transform:rotate(-22deg) scale(2)}60%{opacity:1;transform:rotate(-11deg) scale(.92)}100%{opacity:1;transform:rotate(-12deg)}}
@keyframes tp-lines{0%{transform:scale(1.5);opacity:0}40%{opacity:1}100%{transform:none;opacity:1}}
@keyframes tp-shake{0%,100%{transform:none}25%{transform:translate(-5px,2px)}50%{transform:translate(4px,-2px)}75%{transform:translate(-2px,1px)}}
@keyframes tp-flash{0%{opacity:0;transform:scale(.4) rotate(-8deg)}20%{opacity:1;transform:scale(1.1) rotate(-8deg)}70%{opacity:1;transform:rotate(-8deg)}100%{opacity:0;transform:translateY(-10px) rotate(-8deg)}}
.tp-pon{animation:tp-pon .14s var(--e-pon) both}
.tp-d1{animation-delay:.07s}.tp-d2{animation-delay:.14s}.tp-d3{animation-delay:.21s}
.tp-wipe{animation:tp-wipe .18s var(--e-snap) both}
.tp-wipeout{animation:tp-wipeout .16s var(--e-out) both}
.tp-peta{animation:tp-peta .42s var(--e-snap) both}
.tp-hanko.tp-in{animation:tp-hanko .36s var(--e-snap) both}
.tp-flines.tp-on{animation:tp-lines .2s ease-out both}
.tp-shake{animation:tp-shake .22s steps(4) both}
.tp-flash{animation:tp-flash .5s ease-out both}   /* 擬音(ドカッ！)は0.5秒で消える */
/* 静かな企画(占い・相談・トークガチャ・旅)は body.calm(telop.js が自動で付ける): 集中線・擬音・揺れ・ズレ影なし */
.calm .tp-flines,.calm .tp-flash{display:none}
.calm .tp-shake{animation:none}
.calm .tp-zb.tp-hero,.calm .tp-hero>.tp-zb,.calm .dv-card.tp-hero{box-shadow:none}
.calm .tp-tl>i.tp-s{display:none}

@media (prefers-reduced-motion:reduce){.tp-pon,.tp-wipe,.tp-wipeout,.tp-peta,.tp-hanko.tp-in,.tp-flines.tp-on,.tp-shake,.tp-flash{animation-duration:1ms}}

/* 置き場所の目安(部品は position:fixed のまま。top に使う):
   上の帯 top:var(--band-top) / 下の帯 top:var(--band-low)。左右は var(--gutter)。
   顔の帯(縦25〜60%)に常時の部品を置かない。例外=達成の大テロップ(3秒で消える) */

/* =====================================================================
   7) 今の theme.css のクラス名 → 新しい見た目 (差し替えるだけで効く第1段)
      作り直し(第2段)では dv-* を使わず、上の .tp-tl .tp-zb .tp-tape .tp-tag .tp-ticket .tp-hanko .tp-groove を使う
   ===================================================================== */
/* 箱 → 黒のベタ帯(すりガラス・L字の角・呼吸する線・光 を消す) */
.dv-card{position:relative;color:var(--w);font-family:var(--f-body);background:var(--k);
  border:0;border-radius:6px;box-shadow:none;overflow:hidden;-webkit-backdrop-filter:none;backdrop-filter:none}
.dv-card::before,.dv-card::after{content:none;display:none;animation:none}
.dv-card.tp-hero{box-shadow:var(--drop-pk)}
/* 英字の小見出し → 生成りの札。英字だけの見出しは telop.js が .tp-en を付けて消す */
.dv-eyebrow{display:inline-block;background:var(--paper);color:var(--k);border:2.5px solid var(--k);
  border-radius:3px 12px 12px 3px;font:900 14px/1.2 var(--f-body);letter-spacing:0;text-transform:none;padding:1px 10px 2px 8px;white-space:nowrap}
.dv-eyebrow.tp-en{display:none}
.dv-title{font-family:var(--f-body);font-weight:900;letter-spacing:0;color:var(--w);
  text-shadow:2px 0 0 var(--k),-2px 0 0 var(--k),0 2px 0 var(--k),0 -2px 0 var(--k),2px 2px 0 var(--k),-2px -2px 0 var(--k),2px -2px 0 var(--k),-2px 2px 0 var(--k)}
/* 数 → 極太・緑。縁は黒(ぼかし0) */
.dv-num{font-family:var(--f-head);font-weight:400;font-variant-numeric:normal;letter-spacing:0;color:var(--gr-l);
  text-shadow:2px 0 0 var(--k),-2px 0 0 var(--k),0 2px 0 var(--k),0 -2px 0 var(--k),2px 2px 0 var(--k),-2px -2px 0 var(--k),2px -2px 0 var(--k),-2px 2px 0 var(--k)}
/* 頭文字の丸 → 出さない(写真がある時だけ、黒縁の四角い写真) */
.dv-av{border-radius:3px;overflow:hidden;background:transparent;box-shadow:none;display:flex;align-items:center;justify-content:center;
  font-size:0!important;color:transparent!important;border:0}
.dv-av:has(img){border:2.5px solid var(--k);background:var(--k)}
.dv-av:not(:has(img)){display:none}
.dv-av img{width:100%;height:100%;object-fit:cover;display:block}
/* バー → 黒い溝＋緑のベタ(光・丸み・グラデなし) */
.dv-bar{height:14px;border-radius:3px;background:var(--k);border:2.5px solid var(--k);overflow:hidden}
.dv-fill{height:100%;border-radius:0;background:var(--gr);box-shadow:none}
.dv-card .dv-bar{background:#000;border-color:#6b5a67}   /* 黒い帯の中の溝は縁を少し明るく(見えなくなるので) */
/* 光る点 → 小さな緑の四角 */
.dv-dot{width:8px;height:8px;border-radius:1px;background:var(--gr);box-shadow:none}
/* グラデ文字 → 白文字＋黒縁 */
.dv-gtext{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--w);
  text-shadow:2px 0 0 var(--k),-2px 0 0 var(--k),0 2px 0 var(--k),0 -2px 0 var(--k)}
@keyframes dvBreath{0%,100%{opacity:1}}

/* =====================================================================
   8) (2026-10-04 土台役) めくり数字 .tp-dg … 時計・タイマー用。Telop.digits / Telop.setDigits
      生成りの板＋極太の黒い数字＋板のまん中に黒い切れ目と左右の留め具。コロンはピンクの四角2つ。
      細い数字・ただの四角・光 をやめるための部品。影なし(常時出ている部品なので)
   ===================================================================== */
.tp-dg{display:inline-flex;align-items:center;gap:calc(var(--sz,46px)*.08);font-size:var(--sz,46px);line-height:1;vertical-align:middle;flex-shrink:0}
.tp-dt{position:relative;display:grid;place-items:center;width:.8em;height:1.18em;background:var(--paper);
  border:max(2.5px,.065em) solid var(--k);border-radius:.13em;overflow:hidden;font-style:normal}
.tp-dt>b{display:block;font:400 1em/1 var(--f-head);color:var(--k);position:relative;top:.02em;transform-origin:50% 50%}
.tp-dt::after{content:"";position:absolute;left:0;right:0;top:50%;height:max(2px,.05em);transform:translateY(-50%);background:var(--k)}
.tp-dt::before{content:"";position:absolute;left:-.06em;right:-.06em;top:50%;height:.14em;transform:translateY(-50%);z-index:1;
  background:radial-gradient(circle at 0 50%,var(--k) 0 .07em,transparent .075em),radial-gradient(circle at 100% 50%,var(--k) 0 .07em,transparent .075em)}
.tp-dc{display:flex;flex-direction:column;gap:.2em;font-style:normal}
.tp-dc>b{display:block;width:.19em;height:.19em;background:var(--pk);border:max(2px,.045em) solid var(--k)}
.tp-dg.tp-blink .tp-dc{animation:tp-blink 1s steps(1,end) infinite}
@keyframes tp-blink{50%{opacity:.2}}
/* (修正 R8) めくり中も数字は消さない(縮める動きは配信で「空白の枠」に見えた)。少し上から落ちて止まるだけ */
.tp-dt.tp-flip>b{animation:tp-flipd .22s ease-out}
@keyframes tp-flipd{0%{transform:translateY(-.09em)}100%{transform:none}}
.tp-dg.tp-pk .tp-dt{background:var(--pk)} .tp-dg.tp-pk .tp-dt>b{color:var(--w)} .tp-dg.tp-pk .tp-dc>b{background:var(--w)}
.tp-dg.tp-g .tp-dt{background:var(--gr)} .tp-dg.tp-g .tp-dt>b{color:var(--w)} .tp-dg.tp-g .tp-dc>b{background:var(--w)}
.tp-dg.tp-sm .tp-dt{width:.74em}

/* =====================================================================
   9) (2026-10-04 土台役) 遊び方カード .tp-rule … Telop.rule(text) が自動で出す。
      生成りの紙1枚＋ピンクの見出し札「あそびかた」。開いた時と10秒なにも無い時だけ、数秒でスッと消える
   ===================================================================== */
.tp-rule{position:fixed;left:50%;top:0;z-index:2147483000;display:none;pointer-events:none;padding-top:16px;
  width:max-content;max-width:min(360px,calc(100vw - 24px));transform:translateX(-50%)}
.tp-rule.tp-show{display:block}
.tp-rule .tp-rin{--tilt:-1deg;position:relative;display:block;background:var(--paper);border:3px solid var(--k);border-radius:4px;
  padding:15px 14px 8px 13px;transform:rotate(-1deg)}
.tp-rule .tp-rl{position:absolute;left:-7px;top:-15px;background:var(--pk);color:var(--w);border:2.5px solid var(--k);border-radius:3px;
  font:400 18px/1 var(--f-head);letter-spacing:.06em;padding:4px 10px 5px;transform:rotate(-3deg);white-space:nowrap}
.tp-rule .tp-rb{display:block;font:900 18px/1.38 var(--f-body);color:var(--k);word-break:keep-all;overflow-wrap:anywhere}
.tp-rule .tp-r1,.tp-rule .tp-r2{display:block}
.tp-rule .tp-ra{font:400 18px/1 var(--f-head);color:var(--pk);margin-right:.22em}
.tp-rule.tp-out .tp-rin{animation:tp-ruleout .2s var(--e-out) both}
@keyframes tp-ruleout{to{opacity:0;transform:translateY(-8px) rotate(-1deg)}}
html[data-orient="landscape"] .tp-rule{max-width:min(440px,calc(100vw - 24px))}
@media (prefers-reduced-motion:reduce){.tp-rule.tp-out .tp-rin,.tp-dt.tp-flip>b{animation-duration:1ms}}

/* (修正 R8 2026-10-04) 日本語の改行は「言葉のまとまり」で切る(auto-phrase)。1文字だけ次の行に落ちる改行は避ける(pretty)。
   ページ側で word-break を決めている所はページが勝つ(:where で強さ0) */
:where(html){word-break:auto-phrase}
:where(body){text-wrap:pretty}
.tp-jp{word-break:keep-all!important;overflow-wrap:anywhere;text-wrap:pretty;line-break:strict}