/* ストーリーモード（漫画ビューア）とホーム画面。見た目のルールは docs/AIっぽさ対策.md */

/* ---- ホーム ---- */
.home{display:grid;grid-template-columns:1.25fr 1fr;gap:16px;align-items:stretch}
.home-hero{grid-column:1/-1;position:relative;height:300px;border:var(--line);box-shadow:6px 6px 0 var(--ink);overflow:hidden}
.home-hero .scene-bg{position:absolute;inset:0;width:100%;height:100%}
.home-hero h1{position:absolute;left:22px;top:16px;font-size:64px;font-weight:900;line-height:1;color:var(--gold);-webkit-text-stroke:9px var(--ink);paint-order:stroke fill;transform:rotate(-3deg)}
.home-hero .home-mons{position:absolute;right:4%;bottom:6px;display:flex;align-items:flex-end;gap:2px}
.home-hero .home-mons>*{width:150px;height:150px}
.home-hero .home-mons>*:nth-child(2),.home-hero .home-mons>*:nth-child(3){width:96px;height:96px}
.mode{position:relative;display:flex;flex-direction:column;justify-content:flex-end;text-align:left;min-height:190px;padding:16px 18px;border:4px solid var(--ink);box-shadow:0 7px 0 var(--ink);border-radius:0;overflow:hidden;color:#fff}
.mode:active{transform:translateY(6px);box-shadow:0 1px 0 var(--ink)}
.mode b{position:relative;font-size:40px;font-weight:900;line-height:1.1;-webkit-text-stroke:8px var(--ink);paint-order:stroke fill}
.mode small{position:relative;font-size:14px;font-weight:800;background:var(--ink);padding:2px 8px;width:fit-content;margin-top:6px}
.mode-story{background:var(--red)}
.mode-story::before{content:"";position:absolute;inset:-40%;background:repeating-conic-gradient(from 0deg at 80% 30%,#0003 0 2deg,transparent 2deg 10deg)}
.mode-story .mode-koma{position:absolute;right:14px;top:14px;width:46%;height:62%;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1.3fr;gap:5px;transform:rotate(4deg)}
.mode-story .mode-koma i{background:var(--card);border:3px solid var(--ink)}
.mode-story .mode-koma i:first-child{grid-column:1/-1}
.mode-train{background:var(--teal)}
.mode-train .mode-mon{position:absolute;right:10px;top:8px;width:120px;height:120px}
.home-resume{grid-column:1/-1;display:flex;align-items:center;gap:12px;border:var(--line);background:var(--card);box-shadow:0 4px 0 var(--ink);padding:8px 12px}
.home-resume .resume-face{width:54px;height:54px;flex:none}
.home-resume p{flex:1;font-weight:700}
@media(max-width:760px){.home{grid-template-columns:1fr}.home-hero{height:220px}.home-hero h1{font-size:44px;-webkit-text-stroke:7px var(--ink)}.home-hero .home-mons>*{width:100px;height:100px}.home-hero .home-mons>*:nth-child(2),.home-hero .home-mons>*:nth-child(3){width:64px;height:64px}.mode{min-height:150px}.mode b{font-size:32px}}

/* ---- 章の一覧 ---- */
.chapters{display:flex;flex-direction:column;gap:12px}
.chapter{display:flex;align-items:center;gap:14px;text-align:left;background:var(--card);border:var(--line);box-shadow:0 5px 0 var(--ink);padding:12px 14px;border-radius:0;position:relative}
.chapter:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}
.chapter .ch-no{flex:none;width:58px;height:74px;background:var(--ink);color:#fff;font-weight:900;font-size:13px;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1}
.chapter .ch-no b{font-size:30px;color:var(--gold)}
.chapter .ch-body b{font-size:20px;font-weight:900;display:block}
.chapter .ch-body small{font-weight:700;color:#6d5a40}
.chapter.unread{background:#fff4cc}
.chapter.unread .ch-no{background:var(--red)}
.chapter .hanko{position:absolute;right:12px;top:-10px}
.story-note{margin-top:12px;font-size:12px;font-weight:700;color:#6d5a40}

/* ---- 漫画ビューア ---- */
.manga{position:fixed;inset:0;z-index:500;background:#1b140e;display:flex;flex-direction:column;color:#fff;user-select:none}
.mg-top,.mg-bar{flex:none;display:flex;align-items:center;gap:8px;padding:6px 10px;background:var(--ink);font-weight:900}
.mg-top b{flex:1;min-width:0;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 2026-10-20 ユーザー：ログ・オート・もどるは上へ。下はシークバーを長く */
.mg-top .mg-btn{padding:5px 8px}
.mg-bar{gap:14px;padding:10px 14px}
.mg-seek-lock{position:absolute;top:0;bottom:0;right:0;background:repeating-linear-gradient(90deg,#2a1f16 0 4px,#5a4a3a 4px 8px);pointer-events:none}
.mg-pageno{font-size:12px;color:var(--gold)}
.mg-btn{background:#3d2f22;color:#fff;border:2px solid #7a6446;border-radius:0;font-weight:900;font-size:13px;padding:5px 12px}
.mg-btn.on{background:var(--gold);color:var(--ink);border-color:#fff}
.mg-btn.next{background:var(--red);border-color:#fff;min-width:84px}
.mg-btn:active{transform:translateY(2px)}
.mg-progress{flex:1;height:6px;background:#5a4a3a;position:relative}
/* 2026-10-19 シークバー：細いバーの上に透明なつまみを重ねる。指で押さえやすいよう当たり判定は高めにとる */
.mg-seek{position:absolute;left:-8px;right:-8px;top:50%;width:calc(100% + 16px);height:36px;margin:0;transform:translateY(-50%);background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer;touch-action:none}
.mg-seek::-webkit-slider-runnable-track{height:36px;background:transparent}
.mg-seek::-moz-range-track{height:36px;background:transparent}
.mg-seek::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:22px;margin-top:7px;border-radius:3px;background:var(--gold);border:2px solid #2a1f16;box-shadow:0 1px 0 #000}
.mg-seek::-moz-range-thumb{width:14px;height:20px;border-radius:3px;background:var(--gold);border:2px solid #2a1f16}
.mg-seek:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.mg-seek-no{position:absolute;bottom:20px;transform:translateX(-50%);padding:2px 6px;background:var(--ink);border:1px solid var(--gold);color:#fff;font-size:12px;pointer-events:none;opacity:0}
.mg-seek-no.on{opacity:1}
.mg-progress i{display:block;height:100%;background:var(--gold)}
.mg-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer}
.mg-page{position:relative;background:#fbf6ea;box-shadow:0 0 0 6px #fbf6ea,10px 10px 0 6px #000a;font-size:calc(var(--pw)*.043)}
.mg-page.flip-in{animation:flipIn .45s cubic-bezier(.2,.9,.3,1)}
@keyframes flipIn{from{transform:translateX(60%) rotate(4deg);opacity:0}to{transform:none;opacity:1}}
.mg-panel{position:absolute;overflow:hidden;background:#fff}
.mg-cam{position:absolute;inset:0}
.mg-cam .scene-bg{position:absolute;inset:0;width:100%;height:100%}
.mg-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mg-speed{position:absolute;inset:-60%;background:repeating-conic-gradient(from 0deg at 50% 50%,var(--ink) 0 1.2deg,#fbf6ea 1.2deg 7deg)}
.mg-panel.is-speed .mg-speed{animation:spin 6s linear infinite}
@keyframes spin{to{transform:rotate(30deg)}}
.mg-cast{position:absolute;aspect-ratio:1;transform:translate(-50%,-80%)}
.mg-cast.flip>*{transform:scaleX(-1)}
.mg-cast svg,.mg-cast img{width:100%;height:100%;display:block}
.mg-panel.enter-0{animation:panelA .38s cubic-bezier(.2,1.3,.4,1)}
.mg-panel.enter-1{animation:panelB .38s cubic-bezier(.2,1.3,.4,1)}
.mg-panel.enter-2{animation:panelC .38s cubic-bezier(.2,1.3,.4,1)}
@keyframes panelA{from{transform:translateX(-30%);opacity:0}}
@keyframes panelB{from{transform:translateY(-25%);opacity:0}}
@keyframes panelC{from{transform:scale(1.25);opacity:0}}
.mg-frames{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.mg-frames polygon{fill:none;stroke:var(--ink);stroke-width:3.5px;vector-effect:non-scaling-stroke;stroke-linejoin:miter}
.mg-frames polygon.enter{animation:fr .38s}
@keyframes fr{from{opacity:0}}

/* 擬音 */
.mg-sfx{position:absolute;z-index:3;font-size:2.4em;font-weight:900;color:#fff;-webkit-text-stroke:.22em var(--ink);paint-order:stroke fill;transform:translate(-50%,-50%) rotate(var(--r));letter-spacing:-.05em;white-space:nowrap;pointer-events:none}
.mg-sfx.slam{animation:sfx .4s cubic-bezier(.2,1.6,.4,1)}
/* 手描きの擬音の絵（チャッピー作・緑抜き）2026-10-08 */
.mg-sfx-img{position:absolute;z-index:3;transform:translate(-50%,-50%) rotate(var(--r));pointer-events:none;height:auto}
.mg-sfx-img.slam{animation:sfx .4s cubic-bezier(.2,1.6,.4,1)}
/* ゲームの側で描く擬音（2026-10-08）。ページの幅に合わせた大きさ */
.mg-sfx.drawn{font-size:calc(var(--pw)*.075*var(--fs,1));font-family:'MgKanji','Hiragino Sans','Yu Gothic',sans-serif;font-style:italic;-webkit-text-stroke:.16em var(--ink);line-height:1}
.mg-sfx.drawn.tate{writing-mode:vertical-rl;text-orientation:upright;letter-spacing:-.12em}
.mg-bar .mg-btn[disabled]{opacity:.35}
@keyframes sfx{from{transform:translate(-50%,-50%) rotate(var(--r)) scale(2.4);opacity:0}}

/* フキダシ（縦書き） */
.mg-bubble{position:absolute;z-index:4;transform:translateX(-50%);color:var(--ink);font-weight:800;line-height:1.35}
.mg-bubble.pop{animation:pop2 .3s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop2{from{transform:translateX(-50%) scale(.3);opacity:0}}
.mg-bubble-in{position:relative;z-index:1;writing-mode:vertical-rl;max-height:calc(var(--pw)*.34);padding:.9em .75em;background:#fff;border:max(2px,calc(var(--pw)*.006)) solid var(--ink);border-radius:50%}
.mg-text{display:block;min-height:1em;white-space:pre-wrap}
.mg-say .mg-bubble-in{border-radius:46%/40%}
.mg-think .mg-bubble-in{border-style:dashed;border-radius:46%/40%}
.mg-shout{filter:drop-shadow(2px 0 0 var(--ink)) drop-shadow(-2px 0 0 var(--ink)) drop-shadow(0 2px 0 var(--ink)) drop-shadow(0 -2px 0 var(--ink))}
.mg-shout .mg-bubble-in{border:0;border-radius:0;padding:1.6em 1.3em;font-size:1.15em;font-weight:900;clip-path:polygon(50% 0,58% 10%,72% 2%,74% 15%,90% 12%,85% 26%,100% 32%,88% 42%,99% 55%,86% 61%,95% 76%,80% 76%,82% 92%,67% 85%,58% 100%,49% 88%,37% 98%,33% 84%,17% 90%,19% 75%,3% 70%,13% 58%,0 46%,13% 39%,4% 24%,19% 22%,16% 6%,32% 12%,40% 0)}
.mg-narr .mg-bubble-in{border-radius:0;background:#fff3c4;padding:.6em .5em;font-weight:700}
.mg-narr.wide .mg-bubble-in{writing-mode:horizontal-tb;max-height:none;white-space:nowrap;padding:.35em .9em}
.mg-tail{position:absolute;left:50%;top:50%;width:1.1em;height:1.6em;margin:-.8em 0 0 -.55em;transform-origin:50% 0;z-index:0;background:var(--ink);clip-path:polygon(0 0,100% 0,50% 100%)}
.mg-tail::after{content:"";position:absolute;inset:0 3px 5px;background:#fff;clip-path:polygon(0 0,100% 0,50% 100%)}
.mg-think .mg-tail{display:none}
.mg-shout .mg-tail{background:#fff}.mg-shout .mg-tail::after{display:none}

/* ログ */
.mg-log{position:absolute;inset:44px 0 46px;background:#140e08e6;display:flex;justify-content:center;overflow:auto;z-index:10}
.mg-log-in{width:min(560px,100%);padding:16px}
.mg-log p{border-bottom:1px dashed #7a6446;padding:8px 0;font-weight:700}
.mg-log b{display:block;color:var(--gold);font-size:12px}
@media (prefers-reduced-motion: reduce){.mg-panel,.mg-sfx,.mg-bubble,.mg-page{animation:none!important}.mg-speed{animation:none!important}}
.hud .logo{background:none;border:0;padding:0;text-align:left;color:inherit}
.mg-narr.wide .mg-text{white-space:nowrap}
/* ストーリーの戦闘（story-battle.js） */
.mg-battle{flex:1;overflow:auto;padding:10px 16px 20px;background:#efe3c4;color:#2a1f16}
.mg-battle .b3{max-width:900px;margin:auto}
.sb-prep{max-width:760px;margin:auto}
.sb-lead{font-weight:700;margin:10px 0 6px}
.sb-fixed{display:flex;align-items:center;gap:10px;border:3px solid #2a1f16;background:#fffaf0;padding:6px 10px}
.sb-fixed img{width:64px;height:64px;object-fit:contain}
.sb-fixed small{display:block;font-weight:500;font-size:12px}
.sb-cands{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.sb-cand{border:3px solid #2a1f16;background:#fffaf0;box-shadow:0 4px 0 #2a1f16;padding:6px;font:inherit;color:#2a1f16;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px}
.sb-cand img{width:60px;height:60px;object-fit:contain}
.sb-cand small{font-weight:500;font-size:11px}
.sb-cand.on{background:#ffd76a}
.sb-cand:active{transform:translateY(4px);box-shadow:none}
.sb-go{margin-top:14px}
.mg-text .t-off{visibility:hidden}
/* 絵に描かれた白いフキダシの上に、文字だけを置く */
.mg-bubble.bare{filter:none}
.mg-bubble.bare .mg-bubble-in{background:none;border:0;clip-path:none;padding:0}
.mg-bubble.bare .mg-tail{display:none}
/* 絵のフキダシにのせる文字：漫画のアンチック体（漢字はゴシック、かなは明朝）。真ん中に置き、改行は \n */
@font-face{font-family:MgKana;src:local("HiraMinProN-W6"),local("Hiragino Mincho ProN W6"),local("YuMincho-Demibold"),local("Yu Mincho Demibold"),local("NotoSerifJP-Bold"),local("Noto Serif JP Bold");unicode-range:U+3000-303F,U+3040-30FF,U+FF01-FF0F,U+FF1F}
@font-face{font-family:MgKanji;src:local("HiraKakuProN-W6"),local("Hiragino Kaku Gothic ProN W6"),local("HiraginoSans-W6"),local("YuGothic-Bold"),local("Yu Gothic Bold"),local("NotoSansJP-Bold"),local("Noto Sans JP Bold")}
.mg-bubble.bare{transform:translate(-50%,-50%);font-family:MgKana,MgKanji,"Hiragino Kaku Gothic ProN",sans-serif;font-weight:700;line-height:1.5;letter-spacing:.04em}
.mg-bubble.bare .mg-bubble-in{max-height:none}
.mg-bubble.bare .mg-text{white-space:pre;display:block}
.mg-bubble.bare.mg-shout{font-weight:900}
.mg-bubble.bare.mg-narr .mg-bubble-in{background:none}
.mg-bubble.bare.pop{animation:popBare .25s ease-out}
@keyframes popBare{from{opacity:0;transform:translate(-50%,-50%) scale(.85)}}
/* ゲームの側で描くフキダシ（mangaDrawn）。文字は縦書き・アンチック体、大きさはページの幅の約3.4% */
.mg-shapes{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:visible}
.mg-shapes g.pop{animation:none}
@keyframes fadeShape{from{opacity:0}}
.mg-bubble.drawn{transform:translate(-50%,-50%);font-family:MgKana,MgKanji,"Hiragino Kaku Gothic ProN",sans-serif;font-weight:700;line-height:1.5;letter-spacing:.03em;z-index:5}
.mg-bubble.drawn .mg-bubble-in{background:none;border:0;padding:0;clip-path:none;max-height:none;font-size:calc(var(--pw)*.034*var(--fs,1))}
.mg-bubble.drawn .mg-text{white-space:pre;display:block}
.mg-bubble.drawn .mg-tail{display:none}
.mg-bubble.drawn.mg-shout .mg-bubble-in{font-size:calc(var(--pw)*.04*var(--fs,1));font-weight:900;font-family:MgKanji,"Hiragino Kaku Gothic ProN",sans-serif}
.mg-bubble.drawn.mg-narr .mg-bubble-in{font-size:calc(var(--pw)*.03*var(--fs,1));background:none}
.mg-bubble.drawn.mg-naked .mg-text{paint-order:stroke fill;-webkit-text-stroke:.28em #fff}
.mg-bubble.drawn.pop{animation:none} /* 2026-10-12 ユーザー：セリフが動くと読みにくい → 大きさを変えず、うすく出るだけにする */
@keyframes fadeText{from{opacity:0}}
.mg-bubble.drawn.mg-shout{filter:none}
.mg-bubble.drawn.yoko .mg-bubble-in{writing-mode:horizontal-tb}
.sb-fixed .sb-swap{margin-left:auto}
.sb-hint{font-size:12px;font-weight:500;margin:4px 0 8px}
.sb-fixed .sb-swap{white-space:nowrap}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.mg-text .tc{visibility:hidden}.mg-text .tc.on{visibility:visible}
/* 読み終わりの確認（2026-10-10）：下のボタンのすぐ上、右寄せで小さく。絵の真ん中を隠さない */
.mg-endask{position:fixed;right:10px;bottom:calc(64px + env(safe-area-inset-bottom,0px));z-index:200;display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end;max-width:calc(100% - 20px);background:#2a1f16f2;color:#fff6df;border:2px solid #d9b25a;padding:6px 8px;box-shadow:0 4px 0 #0008;animation:popBare .2s ease-out}
.mg-endask p{margin:0 4px 0 2px;font-weight:900;font-size:14px}
.mg-endask .mg-btn{font-size:13px;padding:6px 10px}
.mg-endask .mg-btn.primary{background:#c0392b;border-color:#f2c66a}

/* 2026-10-12 文字の形が決まるまでフキダシを隠す（manga.js mangaPaint） */
.mg-page.mg-hold .mg-bubble,.mg-page.mg-hold .mg-shapes{visibility:hidden}
/* 2026-10-12 フキダシの形を文字の箱の中に置く（manga.js mangaDrawn）。大きさは文字の箱に対する％と文字の大きさ(em)で決まるので、文字が変わってもずれない */
.mg-bubble.drawn .mg-bubble-in{position:relative}
.mg-bubble.drawn .mg-text{position:relative;z-index:1}
.mg-bubble.drawn .bb{position:absolute;overflow:visible;pointer-events:none}
.mg-bubble.drawn .bb-e{left:calc(-15% - 1.235em);top:calc(-15% - 1.235em);width:calc(130% + 2.47em);height:calc(130% + 2.47em)}
.mg-bubble.drawn .bb-u{left:calc(-50.75% - 1.914em);top:calc(-50.75% - 1.914em);width:calc(201.5% + 3.828em);height:calc(201.5% + 3.828em)}
.mg-bubble.drawn .bb-s{left:calc(-37.1% - 1.655em);top:calc(-37.1% - 1.655em);width:calc(174.2% + 3.31em);height:calc(174.2% + 3.31em)}
.mg-bubble.drawn .bb-r{left:-.76em;top:-.76em;width:calc(100% + 1.52em);height:calc(100% + 1.52em)}
/* svg は left/right だけだと縦横比で幅が決まるので、width/height を直接決める */
.mg-bubble.drawn .bb-t{left:50%;top:50%;width:1px;height:1px}
/* 2026-10-12 iPhone で吹き出しがずれる対策：Safari は「横書きの箱の中に縦書きの中身」だと外の箱の幅を0と数えることがあり、
   translate(-50%) の中央合わせが効かなくなって半分右にずれていた。外の箱も中身と同じ向きにして、幅は中身ちょうどにする */
.mg-bubble{width:max-content;height:max-content}
.mg-bubble:not(.wide):not(.yoko){writing-mode:vertical-rl}
/* 読み終える＝藍（読む）、戦いをやめる＝赤 */
.mg-endask .mg-btn.primary{background:#2d4e86}
.mg-endask .mg-btn.primary.danger{background:#c0392b}
.mg-quitask{left:50%;right:auto;top:50%;bottom:auto;transform:translate(-50%,-50%);flex-direction:column;align-items:stretch;text-align:center;padding:14px 16px;gap:8px}
.mg-quitask p small{display:block;font-weight:700;font-size:12px;opacity:.85;margin-top:2px}
/* 2026-10-13 ユーザー：ページの終わりに右下へ「次へ」。漫画の紙に貼った和紙の付箋。矢印は線で描く（記号の字は使わない） */
.mg-turn{position:absolute;right:1.6%;bottom:1.4%;z-index:6;display:flex;align-items:center;gap:.45em;padding:.32em .7em .32em .8em;background:#f4ecd9;border:2px solid #1a1410;box-shadow:2px 2px 0 #1a1410;font:900 clamp(12px,3.4vw,16px)/1 'Zen Maru Gothic',sans-serif;color:#1a1410;transform:rotate(-2deg);pointer-events:none;animation:mg-turn-in .35s ease-out both,mg-turn-nudge 1.6s ease-in-out .4s infinite}
.mg-turn::after{content:'';width:.5em;height:.5em;border-top:2.5px solid #1a1410;border-right:2.5px solid #1a1410;transform:rotate(45deg);margin-left:-.1em}
@keyframes mg-turn-in{from{opacity:0;transform:translate(6px,0) rotate(-2deg)}to{opacity:1;transform:rotate(-2deg)}}
@keyframes mg-turn-nudge{0%,100%{translate:0 0}50%{translate:3px 0}}
@media (prefers-reduced-motion:reduce){.mg-turn{animation:none}}
.mg-bubble.drawn.mg-blast .mg-bubble-in{font-size:calc(var(--pw)*.044*var(--fs,1));font-weight:900;font-family:MgKanji,"Hiragino Kaku Gothic ProN",sans-serif}

/* 2026-10-19 ユーザー：絵の枠に合わせると小さくなるナレーションは、ゲーム側の白い枠（絵の枠より一回り大きい）に大きく入れる */
.mg-bubble.drawn.nbox .mg-bubble-in{background:#fff;border:2px solid #111;padding:.45em 1.1em}
/* 2026-11-01 ユーザー：叫びに緊迫感を。吹き出しなしの描き文字（白い太字に黒い太ふち・少し傾けて震わせる） */
.mg-bubble.drawn.kaki .mg-bubble-in{font-weight:900;font-family:MgKanji,"Hiragino Kaku Gothic ProN",sans-serif;font-size:calc(var(--pw)*.05*var(--fs,1))}
.mg-bubble.drawn.mg-naked.kaki .mg-text{color:#fff;-webkit-text-stroke:.26em #111;paint-order:stroke fill;letter-spacing:-.04em;transform:skewY(-6deg);animation:mgKaki .09s steps(2) 6}
@keyframes mgKaki{0%{translate:0 0}50%{translate:.04em -.03em}100%{translate:-.03em .03em}}
/* 傍点（台本の《》）：文字の右（横書きは上）に黒い点 */
.mg-text em.bt{font-style:normal;position:relative}
.mg-text em.bt::after{content:"";position:absolute;right:-.42em;top:50%;width:.24em;height:.24em;margin-top:-.12em;border-radius:50%;background:currentColor}
.mg-bubble.yoko .mg-text em.bt::after{right:auto;left:50%;top:-.3em;margin:0 0 0 -.12em}