/* ===== 📺 スタジオで見る（どうめいNEWS）=====
   AIどうめいがスタジオでニュースを読んでいるように見せるモード。
   スタジオは写真素材の重ね合わせ（奥から：img/studio_bg.jpg → キャスター img/domei_anchor.webp → 机 img/studio_desk.webp）。
   ※ キャスターの写真はそのまま（服の合成・口や表情を動かす加工はしない。全体が軽く揺れる／うなずくだけ）。声はブラウザ標準の読み上げ。 */

/* 開くボタン（ページ上部） */
.st-open{display:flex;align-items:center;gap:10px;margin-top:10px;padding:10px 18px 10px 12px;border:0;border-radius:16px;cursor:pointer;
  background:linear-gradient(100deg,#0f1d3d,#22406b 60%,#2c5a96);color:#fff;font-weight:bold;font-size:17px;line-height:1.3;text-align:left;
  box-shadow:0 4px 0 #0a1428,0 8px 20px #22406b55;position:relative;overflow:hidden;max-width:100%}
.st-open:hover{filter:brightness(1.1)}
.st-open:active{transform:translateY(2px);box-shadow:0 2px 0 #0a1428}
.st-open .tv{flex:0 0 auto;width:46px;height:34px;border-radius:7px;background:#ff7a59;display:flex;align-items:center;justify-content:center;font-size:20px;box-shadow:inset 0 0 0 3px #ffffff55}
.st-open small{display:block;font-size:11px;font-weight:normal;opacity:.85}
.st-open .rec{position:absolute;right:10px;top:8px;font-size:10px;letter-spacing:.08em;color:#ffd36b}
.st-open::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,#ffffff22 45%,transparent 60%);transform:translateX(-100%);animation:stShine 4.5s ease-in-out infinite}
@keyframes stShine{0%,60%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

/* ===== 全画面 ===== */
.stu{position:fixed;inset:0;z-index:100000;background:#04060c;color:#fff;font-family:"Hiragino Kaku Gothic ProN","Yu Gothic UI","Meiryo",sans-serif;--cc:#ff7a59;--cc2:#ffb347}
.stu[hidden]{display:none}
.stu *{box-sizing:border-box}
.st-wrap{display:flex;flex-direction:column;height:100%;height:100dvh}
.st-stage{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;container:stage / size;background:#03050b}

/* --- 舞台（16:9 の箱）---
   写真3枚を 16:9 の箱に % で置き、箱を画面いっぱい（object-fit:cover と同じ考え方）に広げる。
   箱の位置と大きさは変数で持ち、箱の外にある部品（壁の大画面・歩くどうめい・下帯）も同じ式で位置を合わせる。
   --W/--H：箱の幅・高さ　--X/--Y：箱の左上（舞台からの位置）。cq 単位は使う側で舞台（.st-stage）を基準に計算される。 */
.st-stage>*{
  --W:min(max(100cqw,177.78cqh),222.2cqh);   /* 上下の切り取りは最大 20%（壁の大画面と机のロゴが両方見えるように）。それ以上横長の画面は左右をぼかした背景で埋める */
  --H:calc(var(--W) * .5625);
  --X:clamp(min(0px,calc(100cqw - var(--W))), calc(50cqw - var(--W) * .5), max(0px,calc(50cqw - var(--W) * .5)));
  --Y:clamp(calc(100cqh - var(--H)), calc(50cqh - var(--H) * .55), 0px);
}
.st-stage::before{content:"";position:absolute;inset:-30px;background:url(img/studio_bg.jpg) center / cover no-repeat;filter:blur(18px) brightness(.5)}
.st-set{position:absolute;left:var(--X);top:var(--Y);width:var(--W);height:var(--H);
  background:#03050b url(img/studio_bg.jpg) center / 100% 100% no-repeat}
.st-set::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#03050b99,transparent 4%,transparent 96%,#03050b99)}

/* --- キャスター（写真そのまま。照明に合わせて色をわずかになじませるだけ） --- */
.st-caster{position:absolute;left:68%;top:30%;height:49%;aspect-ratio:683/1024;transform:translateX(-50%);z-index:4}
.st-bob{position:absolute;inset:0;transform-origin:50% 60%;animation:stBob 5.5s ease-in-out infinite}
.st-anchor{position:absolute;inset:0;transform-origin:50% 32%}
.st-anchor img{display:block;width:100%;height:100%;filter:brightness(.92) contrast(1.06) saturate(.88) drop-shadow(0 0 5px #4d7dff40)}
.st-tint{position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;opacity:.42;
  background:linear-gradient(100deg,#2f5bff 0%,#9db8ff 45%,#ffc48a 100%);
  -webkit-mask:url(img/domei_anchor.webp) center / 100% 100% no-repeat;mask:url(img/domei_anchor.webp) center / 100% 100% no-repeat}
.st-bob.nod .st-anchor{animation:stNod .9s ease-in-out}
@keyframes stBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-0.5%)}}
@keyframes stNod{0%,100%{transform:rotate(0)}35%{transform:rotate(1.1deg) translateY(.5%)}70%{transform:rotate(-.3deg)}}
/* 名札（AIどうめい・AIが読んでいます）…常に出す。キャスターの左、胸の高さ */
.st-plate{position:absolute;right:97%;bottom:40%;z-index:3;display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  background:linear-gradient(90deg,#0d1a36f0,#16295af0);border-left:4px solid var(--cc);padding:5px 10px 6px;border-radius:4px;box-shadow:0 4px 14px #0008;transition:border-color 1s}
.st-plate b{font-size:clamp(12px,3cqh,22px);letter-spacing:.06em;white-space:nowrap}
.st-plate span{font-size:clamp(9px,1.9cqh,14px);color:#ffd36b;white-space:nowrap}
.st-wave{display:flex;gap:2px;align-items:flex-end;height:10px;margin-top:2px}
.st-wave i{display:block;width:3px;height:3px;background:#7fe3ff;border-radius:1px;transition:height .2s}
.stu.st-talk .st-wave i{animation:stWave .7s ease-in-out infinite}
.stu.st-talk .st-wave i:nth-child(2){animation-delay:-.2s}.stu.st-talk .st-wave i:nth-child(3){animation-delay:-.45s}.stu.st-talk .st-wave i:nth-child(4){animation-delay:-.1s}.stu.st-talk .st-wave i:nth-child(5){animation-delay:-.35s}
@keyframes stWave{0%,100%{height:3px}50%{height:10px}}

/* --- キャスター机（写真）と局ロゴ --- */
.st-desk{position:absolute;left:68%;bottom:0;width:62%;aspect-ratio:1664/432;transform:translateX(-50%);z-index:5}
.st-desk img{display:block;width:100%;height:100%}
.st-desk-logo{position:absolute;left:50%;top:55%;transform:translate(-50%,-50%);font-weight:900;letter-spacing:.08em;white-space:nowrap;line-height:1;
  font-size:calc(var(--W) * .019);color:#f4f8ff;
  text-shadow:0 0 .12em #fff,0 0 .45em #7fb2ff,0 0 1.1em color-mix(in srgb,var(--cc) 55%,#3b6cff);animation:stLogo 4s ease-in-out infinite}
.st-desk-logo b,.st-bug b{color:var(--cc2);font-style:italic;margin-left:.15em;transition:color 1s}
@keyframes stLogo{50%{opacity:.86}}

/* --- サブモニター：背景の LED ビデオウォールにはめ込む（画像の左右 14.55%〜65.25%、上下 17.2%〜50.9%） --- */
.st-mon{position:absolute;z-index:2;left:calc(var(--X) + var(--W) * .1455);top:calc(var(--Y) + var(--H) * .172);width:calc(var(--W) * .507);height:calc(var(--H) * .337);
  background:#020814;border-radius:2px;box-shadow:0 0 0 1px #000c,0 0 calc(var(--W) * .03) color-mix(in srgb,var(--cc) 35%,transparent);transition:box-shadow 1s}
.st-mon::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;   /* LED パネルのつなぎ目（6×3）と映り込み */
  background:linear-gradient(90deg,#000b 0 1px,transparent 1px) 0 0 / 16.666% 100%,
             linear-gradient(#000b 0 1px,transparent 1px) 0 0 / 100% 33.333%,
             linear-gradient(170deg,#ffffff12,transparent 35%,transparent 75%,#00000030)}
.st-mon-in{position:relative;width:100%;height:100%;overflow:hidden;container:mon / size;
  background:radial-gradient(120% 90% at 0% 0%,color-mix(in srgb,var(--cc) 55%,#0b1631),#0b1631 70%);transition:background 1s}
.st-mon-in::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,#ffffff06 0 1px,transparent 1px 3px)}
.st-mp{position:absolute;inset:0;padding:5cqh 5cqw;display:flex;flex-direction:column;gap:2.5cqh;overflow:hidden;animation:stMonIn .5s ease-out}
@keyframes stMonIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.st-mk{display:inline-flex;align-self:flex-start;align-items:center;gap:.4em;background:var(--cc);color:#fff;font-weight:bold;font-size:clamp(10px,5cqh,20px);padding:.2em .7em;border-radius:99px;transition:background 1s}
.st-mt{font-size:clamp(13px,min(8.5cqh,6.2cqw),40px);font-weight:900;line-height:1.3;text-shadow:0 2px 8px #0008}
.st-ms{font-size:clamp(11px,min(5.6cqh,4.2cqw),24px);line-height:1.55;color:#e8eefc}
.st-mrow{display:flex;gap:4cqw;align-items:center}
.st-mimg{flex:0 0 auto;width:min(30cqh,26cqw);aspect-ratio:1;border-radius:14px;overflow:hidden;background:#ffffff22;display:flex;align-items:center;justify-content:center;font-size:min(18cqh,15cqw);position:relative}
.st-mimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.st-box{background:#ffffffee;color:#1d2433;border-radius:12px;padding:2.6cqh 3.5cqw;font-size:clamp(11px,min(5.8cqh,4.4cqw),26px);line-height:1.5;font-weight:bold;border-left:6px solid var(--cc);transition:border-color 1s}
.st-box small{display:block;font-size:.72em;color:#5a6274;font-weight:bold;margin-bottom:.2em}
.st-box.sushi{background:#fff7e8;border-left-color:#f57c00}
.st-src{margin-top:auto;font-size:clamp(9px,3.6cqh,14px);color:#b9c4dc;line-height:1.4}
.st-src2{margin-top:-1cqh}
.st-logo{font-size:clamp(20px,min(16cqh,11cqw),80px);font-weight:900;letter-spacing:.04em;text-align:center;margin-top:4cqh;text-shadow:0 0 30px var(--cc)}
.st-logo b{color:var(--cc2);font-style:italic}
.st-menu{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:1.5cqh 3cqw;font-size:clamp(10px,min(5cqh,3.6cqw),20px)}
.st-menu li{background:#ffffff1a;border-radius:8px;padding:.35em .6em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-menu li.on{background:var(--cc)}
.st-board{display:grid;grid-template-columns:1fr 1fr;gap:2cqh 3cqw}
.st-board div{background:#ffffff14;border-radius:10px;padding:1.6cqh 3cqw}
.st-board small{display:block;font-size:clamp(9px,3.8cqh,15px);color:#c9d3ea}
.st-board b{font-size:clamp(13px,min(7.5cqh,5.4cqw),34px);font-variant-numeric:tabular-nums}
.st-up{color:#ff8a80}.st-dn{color:#80d8ff}.st-fl{color:#ddd}
.st-big{font-size:clamp(26px,min(19cqh,14cqw),120px);font-weight:900;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.st-big small{font-size:.3em;margin-left:.2em}
.st-bars{display:flex;flex-direction:column;gap:.2cqh;font-size:clamp(8px,3.3cqh,13px);line-height:1.25;margin-top:auto}
.st-bigrow{display:flex;align-items:baseline;gap:3cqw;flex-wrap:wrap}
.st-bars div{display:grid;grid-template-columns:7.5em 1fr 3.2em;align-items:center;gap:.5em}
.st-bars i{display:block;height:1.5cqh;min-height:5px;border-radius:9px;background:#ffffff40}
.st-bars .on{color:#fff;font-weight:bold}.st-bars .on i{background:var(--cc2)}
.st-bars span{text-align:right;font-variant-numeric:tabular-nums}
.st-q{display:flex;flex-direction:column;gap:2cqh;margin:0;padding:0;list-style:none}
.st-q li{display:flex;align-items:center;gap:.6em;background:#ffffff1f;border-radius:12px;padding:1.6cqh 3cqw;font-size:clamp(11px,min(6cqh,4.4cqw),26px);font-weight:bold;transition:background .4s,transform .4s,opacity .4s}
.st-q li b{flex:0 0 auto;width:1.8em;height:1.8em;border-radius:50%;background:#fff;color:#1d2433;display:flex;align-items:center;justify-content:center}
.st-q.rv li{opacity:.45}
.st-q.rv li.ok{opacity:1;background:#2e9e5b;transform:scale(1.03)}
.st-q.rv li.ok b::after{content:""}
.st-count{flex:0 0 auto;width:clamp(28px,min(12cqh,9cqw),64px);aspect-ratio:1;border-radius:50%;background:#fff;color:#7e57c2;display:flex;align-items:center;justify-content:center;font-size:clamp(16px,min(7cqh,5cqw),36px);font-weight:900;box-shadow:0 0 0 5px #ffffff44;animation:stPop 1s ease-in-out infinite}
@keyframes stPop{50%{transform:scale(1.08)}}

/* 壁の大画面は横長（約 2.6:1）なので、左右2段組みにする */
@container mon (min-aspect-ratio: 2/1){
  .st-mp{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);grid-template-rows:auto auto auto auto auto 1fr;align-content:start;column-gap:4cqw;row-gap:2.6cqh;padding:7cqh 7cqw 6cqh 4.5cqw}
  .st-mp>*{grid-column:1;min-width:0}
  .st-mp>.st-box,.st-mp>.st-q,.st-mp>.st-bars,.st-mp>.st-menu{grid-column:2;grid-row:1 / -1;align-self:center;margin:0}
  .st-mp>.st-board{grid-column:1 / -1;grid-template-columns:repeat(3,1fr)}
  .st-src{margin-top:0}
  .st-mk{font-size:clamp(10px,6.5cqh,22px)}
  .st-mt{font-size:clamp(13px,min(10cqh,3.8cqw),42px);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .st-ms{font-size:clamp(11px,min(7.2cqh,2.6cqw),26px)}
  .st-box{font-size:clamp(11px,min(7.4cqh,2.6cqw),28px);padding:3.5cqh 2.5cqw}
  .st-src{font-size:clamp(9px,4.6cqh,15px);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .st-mimg{width:min(34cqh,14cqw);font-size:min(20cqh,9cqw)}
  .st-logo{font-size:clamp(20px,min(20cqh,6.4cqw),90px);margin-top:3cqh;white-space:nowrap}
  .st-menu{font-size:clamp(10px,min(6.4cqh,2.3cqw),22px)}
  .st-board b{font-size:clamp(13px,min(9cqh,3.4cqw),36px)}
  .st-board small{font-size:clamp(9px,4.6cqh,15px)}
  .st-big{font-size:clamp(26px,min(24cqh,9cqw),120px)}
  .st-bars{font-size:clamp(8px,4.4cqh,15px);gap:.6cqh}
  .st-bars i{height:2.4cqh}
  .st-q{gap:2.4cqh}
  .st-q li{font-size:clamp(11px,min(7.4cqh,2.6cqw),26px);padding:1.8cqh 1.8cqw}
  .st-count{width:clamp(28px,14cqh,64px);font-size:clamp(16px,8cqh,36px)}
}

/* --- ロゴ・時刻 --- */
.st-bug{position:absolute;left:2.4cqw;top:2.4cqh;z-index:6;font-weight:900;font-size:clamp(12px,3.6cqh,26px);letter-spacing:.05em;background:#000a;padding:.2em .6em;border-radius:6px;border-bottom:3px solid var(--cc);transition:border-color 1s}
.st-clock{position:absolute;right:2.4cqw;top:2.4cqh;z-index:6;display:flex;align-items:center;gap:.5em;font-size:clamp(11px,3cqh,22px);background:#000a;padding:.25em .6em;border-radius:6px;font-variant-numeric:tabular-nums}
.st-live{background:#d32f2f;color:#fff;font-weight:bold;padding:.05em .5em;border-radius:3px;font-size:.85em;letter-spacing:.08em}
.st-live::first-letter{animation:stBlink 1.4s steps(2) infinite}
@keyframes stBlink{50%{color:transparent}}
.st-tag{position:absolute;left:2.4cqw;top:calc(2.4cqh + clamp(22px,6cqh,44px));z-index:6;font-size:clamp(9px,2.2cqh,14px);color:#ffd36b;background:#0008;padding:.15em .6em;border-radius:4px}

/* --- 下帯テロップ（机のロゴにかからないよう、左側に出す） --- */
.st-l3{position:absolute;left:3cqw;right:max(3cqw,calc(100cqw - var(--X) - var(--W) * .575));bottom:3cqh;z-index:7;display:flex;align-items:stretch;filter:drop-shadow(0 6px 14px #0009)}
.st-l3-c{flex:0 0 auto;display:flex;align-items:center;gap:.3em;background:var(--cc);color:#fff;font-weight:900;padding:.35em .8em;font-size:clamp(12px,min(3.8cqh,2.2cqw),26px);clip-path:polygon(0 0,100% 0,92% 100%,0 100%);padding-right:1.2em;transition:background 1s;white-space:nowrap}
.st-l3-h{flex:1 1 auto;min-width:0;display:flex;align-items:center;background:linear-gradient(90deg,#fff,#eef2fa);color:#101828;font-weight:900;padding:.35em .9em;font-size:clamp(13px,min(4.6cqh,2.5cqw),34px);line-height:1.35;margin-left:-.6em;clip-path:polygon(2% 0,100% 0,100% 100%,0 100%)}
.st-l3-h span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.st-l3.in .st-l3-c{animation:stSlide .5s cubic-bezier(.2,.8,.2,1) both}
.st-l3.in .st-l3-h{animation:stSlide .6s .12s cubic-bezier(.2,.8,.2,1) both}
@keyframes stSlide{from{transform:translateX(-110%);opacity:0}to{transform:none;opacity:1}}

/* --- 字幕・帯・操作 --- */
.st-cap{flex:0 0 auto;min-height:calc(2 * 1.5em + 20px);display:flex;align-items:center;justify-content:center;text-align:center;padding:10px 16px;background:#000;font-size:clamp(15px,2.1vw,26px);line-height:1.5;font-weight:bold;color:#fff}
.st-cap.off{display:none}
.st-cap .w{color:#ffd36b}
.st-tick{flex:0 0 auto;display:flex;align-items:stretch;height:32px;background:#0c1428;border-top:2px solid var(--cc);overflow:hidden;font-size:14px;transition:border-color 1s}
.st-tick>b{flex:0 0 auto;display:flex;align-items:center;padding:0 10px;background:var(--cc);font-size:12px;letter-spacing:.06em;transition:background 1s;white-space:nowrap}
.st-tick-in{flex:1;overflow:hidden;position:relative}
.st-tick-tr{position:absolute;left:0;top:0;bottom:0;display:flex;white-space:nowrap;animation:stTick 60s linear infinite}
.st-tick-tr span{display:flex;align-items:center;padding:0 18px;border-right:1px solid #ffffff22;font-variant-numeric:tabular-nums}
.st-tick-tr span em{font-style:normal;margin-left:.4em}
@keyframes stTick{to{transform:translateX(-50%)}}
.st-ctl{flex:0 0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 8px;padding:8px 12px calc(8px + env(safe-area-inset-bottom));background:#0a0d16;border-top:1px solid #ffffff14}
.st-ctl button,.st-ctl select{background:#1b2338;color:#fff;border:1px solid #ffffff2a;border-radius:10px;padding:6px 12px;font-size:15px;cursor:pointer;min-height:38px}
.st-ctl button:hover{background:#26314d}
.st-ctl .pp{background:var(--cc);border-color:transparent;font-weight:bold;min-width:110px;transition:background 1s}
.st-ctl .on{outline:2px solid #ffd36b}
.st-ctl .pos{font-size:12px;color:#aab3c8;min-width:4.5em;text-align:center}
.st-ctl .note{flex-basis:100%;text-align:center;font-size:11px;color:#8d96ab;line-height:1.4}
.st-x{position:absolute;right:10px;top:10px;z-index:20;width:42px;height:42px;border-radius:50%;border:2px solid #fff8;background:#000c;color:#fff;font-size:20px;cursor:pointer}
.st-x:hover{background:#d32f2f}
.st-x~.st-wrap .st-clock{right:calc(2.4cqw + 50px)}
.st-toast{position:absolute;left:50%;top:14%;transform:translateX(-50%);z-index:9;background:#000d;padding:8px 16px;border-radius:10px;font-size:14px;max-width:90%;text-align:center}
.st-progress{position:absolute;left:0;right:0;bottom:0;height:3px;z-index:8;background:#ffffff1a}
.st-progress i{display:block;height:100%;width:0;background:var(--cc2);transition:width .4s}

/* ===== ときどき歩いてくるどうめい（写真の背景を透過しただけ・顔は加工しない）=====
   机の奥の床を歩く。足元は舞台の高さの 65.5% あたり、背の高さは舞台の 38.5%。キャスター・机より奥。 */
.st-walk{position:absolute;left:-12%;top:calc(var(--Y) + var(--H) * .27);height:calc(var(--H) * .385);aspect-ratio:180/900;z-index:3;transform:translateX(-50%);pointer-events:none;--lean:0deg}
.st-walk[hidden]{display:none}
.st-walk-b{position:relative;height:100%;transform-origin:50% 100%}
.st-walk-b img{position:absolute;left:50%;bottom:0;height:100%;width:auto;max-width:none;transform:translateX(-50%);filter:brightness(.9) contrast(1.05) saturate(.9) drop-shadow(0 0 4px #4d7dff40)}
.st-walk-sh{position:absolute;left:50%;bottom:-2%;width:170%;height:5%;transform:translateX(-50%);background:radial-gradient(closest-side,#000d,#0000);border-radius:50%}
.st-walk.walking .st-walk-b{animation:stStep .56s ease-in-out infinite}
.st-walk.walking .st-walk-sh{animation:stStepSh .56s ease-in-out infinite}
@keyframes stStep{0%,50%,100%{transform:translateY(0) rotate(var(--lean))}25%{transform:translateY(-1.8%) rotate(calc(var(--lean) + 1deg))}75%{transform:translateY(-1.8%) rotate(calc(var(--lean) - .6deg))}}
@keyframes stStepSh{25%,75%{transform:translateX(-50%) scale(.85);opacity:.7}}
.st-walk.bow .st-walk-b{animation:stBow 1.3s ease-in-out .1s}
@keyframes stBow{0%,100%{transform:none}45%{transform:translateY(1.4%) scale(.992)}}
.st-walk-say{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%) scale(.6);opacity:0;transition:opacity .25s,transform .25s;white-space:nowrap;
  background:#fff;color:#1d2433;font-weight:bold;font-size:clamp(11px,3cqh,18px);padding:.35em .8em;border-radius:14px;box-shadow:0 4px 12px #0008}
.st-walk-say::after{content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);border:7px solid transparent;border-top-color:#fff}
.st-walk-say.on{opacity:1;transform:translateX(-50%) scale(1)}
.st-walk-say.r{left:auto;right:-8px;transform:scale(.6);transform-origin:100% 100%}
.st-walk-say.r.on{transform:none}
.st-walk-say.r::after{left:auto;right:4px;transform:none}
.st-walk-say.l{left:-8px;transform:scale(.6);transform-origin:0 100%}
.st-walk-say.l.on{transform:none}
.st-walk-say.l::after{left:4px;transform:none}
.st-walk-say.l{left:62%;bottom:86%}   /* 左はしでは頭の右横に出す（左上のロゴにかからないように） */

/* ===== 縦長（スマホ縦）=====
   舞台は下に寄せてキャスター中心に横を切り取り、上の空いたところに薄いガラスのモニターを出す。 */
@container stage (max-aspect-ratio: 9/10){
  .st-stage>*{
    --W:max(100cqw,151.1cqh);                                          /* 舞台の高さ ≒ 画面の 85% */
    --X:clamp(calc(100cqw - var(--W)), calc(50cqw - var(--W) * .68), 0px);   /* キャスターを真ん中に */
    --Y:calc(100cqh - var(--H));
  }
  .st-set::before{content:"";position:absolute;left:0;right:0;top:0;height:14%;background:linear-gradient(#03050b,#03050b00)}
  .st-mon{left:3cqw;width:94cqw;top:max(46px,8cqh);height:calc(var(--Y) + var(--H) * .368 - max(46px,8cqh) - 8px);padding:5px;border-radius:12px;
    background:linear-gradient(150deg,#ffffff2a,#ffffff0a 45%,#ffffff14);border:1px solid #ffffff3a;
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 12px 30px #000a,0 0 30px color-mix(in srgb,var(--cc) 35%,transparent),inset 0 1px 0 #ffffff40}
  .st-mon::after{inset:5px;border-radius:8px;background:linear-gradient(160deg,#ffffff1c,transparent 38%)}
  .st-mon-in{border-radius:8px}
  .st-plate{bottom:54%;padding:3px 7px 4px}
  .st-plate b{font-size:clamp(11px,3.4cqw,16px)}
  .st-plate span{font-size:clamp(9px,2.6cqw,12px)}
  .st-desk-logo{font-size:calc(var(--W) * .021)}
  .st-l3{left:2cqw;right:2cqw;bottom:1cqh;align-items:center}
  .st-l3-c{font-size:clamp(10px,3.2cqw,15px);padding:.3em .9em .3em .6em}
  .st-l3-h{font-size:clamp(11px,3.5cqw,17px);padding:.3em .6em;line-height:1.3}
  .st-bug{font-size:clamp(12px,4cqw,20px)}
  .st-clock{font-size:clamp(10px,3.2cqw,16px)}
  .st-tag{display:none}
  .st-walk-say{font-size:clamp(10px,3.4cqw,15px)}
}
/* 舞台がとても低いとき（スマホ横など）は札・テロップを小さく */
@container stage (max-height: 320px){
  .st-plate{padding:2px 6px 3px;border-left-width:3px}
  .st-plate b{font-size:10px}
  .st-plate span{font-size:8px}
  .st-wave{display:none}
  .st-tag{display:none}
  .st-l3-c{font-size:11px}
  .st-l3-h{font-size:12px}
  .st-bug{font-size:12px}
  .st-clock{font-size:10px}
}
@media (max-width:600px){
  .st-ctl button,.st-ctl select{padding:5px 9px;font-size:14px;min-height:36px}
  .st-ctl .pp{min-width:90px}
  .st-cap{font-size:16px;padding:8px 12px}
}
@media (prefers-reduced-motion: reduce){
  .st-bob,.st-bob.nod .st-anchor,.st-open::after,.st-desk-logo{animation:none}
  .st-tick-tr{animation-duration:180s}
  .st-walk.walking .st-walk-b,.st-walk.walking .st-walk-sh{animation:none}
}

/* サブモニターが低いとき（縦置き・小さい画面）は中身を減らす。横長の壁画面は2段組みなので別 */
@container mon (max-height: 300px) and (max-aspect-ratio: 2/1){
  .st-mp{padding:4cqh 4cqw;gap:2cqh}
  .st-board div:nth-child(n+5){display:none}
  .st-bars{display:none}
  .st-q li{padding:1cqh 3cqw}
  .st-mimg{width:min(26cqh,22cqw)}
}
@container mon (max-height: 200px){
  .st-ms{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .st-src{display:none}
}
@container mon (max-height: 200px) and (min-aspect-ratio: 2/1){
  .st-board div:nth-child(n+7){display:none}
  .st-mimg{display:none}
  .st-box{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;padding:2cqh 2cqw}
  .st-box small{display:none}
}