:root{
    --fg:#f6f8fb; --dim:#aeb9c6; --accent:#ff9d4d; --accent2:#ffd96b; --good:#4ee08e; --line:#3a4452;
    --jf:#5fa8ff; --mu:#ff6fb0; --bim:#9b8cff;
    --sans:"Zen Kaku Gothic New",-apple-system,"Hiragino Sans",system-ui,sans-serif;
    --serif:"Shippori Mincho B1","Hiragino Mincho ProN",serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  body{background:#080a0e; color:var(--fg); overflow:hidden; font-family:var(--sans); -webkit-font-smoothing:antialiased; letter-spacing:.012em}

  /* 背景(Gemini生成) */
  #bg{position:fixed; inset:0; background-size:cover; background-position:center; transition:opacity .7s ease; opacity:1}
  #bg::after{content:""; position:absolute; inset:0;
    background:radial-gradient(130% 100% at 50% 35%, rgba(8,10,14,.45), rgba(8,10,14,.82) 78%),
               linear-gradient(180deg, rgba(8,10,14,.4) 0%, rgba(8,10,14,.15) 40%, rgba(8,10,14,.92) 100%)}

  #stage{position:fixed; left:0; right:0; top:0; bottom:172px; display:flex; align-items:center; justify-content:center}
  .slide{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:clamp(12px,2.2vh,24px); padding:clamp(26px,5.5vw,80px) clamp(26px,6vw,90px) 0; text-align:center;
    opacity:0; transform:translateY(16px) scale(.995); pointer-events:none; transition:opacity .6s ease, transform .6s ease}
  .slide.on{opacity:1; transform:none; pointer-events:auto}

  .kicker{font-size:clamp(12px,1.45vw,16px); letter-spacing:.24em; color:var(--accent2); text-transform:uppercase; font-weight:700}
  h1{font-family:var(--serif); font-size:clamp(32px,6.4vw,80px); line-height:1.1; font-weight:800; text-shadow:0 2px 30px rgba(0,0,0,.5)}
  h2{font-size:clamp(23px,4.2vw,50px); line-height:1.16; font-weight:900; text-shadow:0 2px 24px rgba(0,0,0,.5)}
  .lead{font-size:clamp(15px,2.05vw,25px); color:#e6ecf3; max-width:30ch; line-height:1.75; font-weight:500}
  .meta{font-size:clamp(11px,1.45vw,16px); color:var(--dim); font-weight:500}
  .tag{display:inline-block; padding:.3em .95em; border-radius:999px; font-weight:700; font-size:clamp(12px,1.55vw,18px); backdrop-filter:blur(4px)}
  .tag.jf{background:rgba(95,168,255,.18); color:var(--jf); border:1px solid rgba(95,168,255,.45)}
  .tag.mu{background:rgba(255,111,176,.18); color:var(--mu); border:1px solid rgba(255,111,176,.45)}
  .tag.bim{background:rgba(155,140,255,.18); color:var(--bim); border:1px solid rgba(155,140,255,.45)}

  table{border-collapse:collapse; font-size:clamp(12px,1.5vw,19px); max-width:min(92vw,960px); width:100%;
    background:rgba(10,13,18,.55); border-radius:16px; overflow:hidden; backdrop-filter:blur(6px)}
  th,td{padding:.52em .7em; border-bottom:1px solid var(--line); text-align:left; vertical-align:top}
  th{color:var(--accent2); font-weight:700; white-space:nowrap}
  td.c,th.c{text-align:center}
  .pick{color:var(--good); font-weight:800}
  .num{font-variant-numeric:tabular-nums}
  .note{font-size:clamp(11px,1.4vw,15px); color:var(--dim); max-width:48ch; line-height:1.6}

  ul.do{list-style:none; display:flex; flex-direction:column; gap:12px; max-width:min(90vw,800px); width:100%}
  ul.do li{background:rgba(12,15,21,.62); border:1px solid var(--line); border-left:4px solid var(--accent);
    border-radius:14px; padding:14px 20px; text-align:left; font-size:clamp(14px,1.9vw,21px); line-height:1.5; backdrop-filter:blur(6px)}
  ul.do li b{color:var(--good)}

  .row{display:flex; gap:clamp(20px,5vw,70px); flex-wrap:wrap; justify-content:center; align-items:flex-end}
  .stat .k{font-size:clamp(12px,1.5vw,16px); color:var(--dim)}
  .stat .v{font-size:clamp(30px,6vw,68px); font-weight:900; font-variant-numeric:tabular-nums}

  /* 仲間アバター(クロージング) */
  .nakama{display:flex; gap:clamp(28px,6vw,72px); justify-content:center; align-items:flex-start}
  .nakama figure{display:flex; flex-direction:column; align-items:center; gap:10px}
  .nakama img{width:clamp(76px,11vw,128px); height:clamp(76px,11vw,128px); border-radius:50%; object-fit:cover;
    border:3px solid rgba(255,255,255,.18); box-shadow:0 8px 40px rgba(0,0,0,.5)}
  .nakama figcaption{font-size:clamp(13px,1.7vw,20px); font-weight:700}
  .nakama .sub{font-size:clamp(11px,1.3vw,14px); color:var(--dim); font-weight:500}

  /* 字幕バー(発話) */
  #captionbar{position:fixed; left:0; right:0; bottom:0; height:172px; display:flex; align-items:center;
    gap:clamp(14px,2vw,26px); padding:0 clamp(22px,5vw,72px) 26px;
    background:linear-gradient(180deg, rgba(8,10,14,0) 0%, rgba(6,8,11,.78) 38%, rgba(5,7,10,.95) 100%)}
  #heads{flex:none; display:flex; gap:10px}
  .head{width:clamp(54px,6.6vw,82px); height:clamp(54px,6.6vw,82px); border-radius:50%; object-fit:cover;
    border:2.5px solid transparent; filter:grayscale(.5) brightness(.6); opacity:.5;
    transform:scale(.9); transition:all .35s ease; box-shadow:0 0 0 0 rgba(255,157,77,.5)}
  .head.active{filter:none; opacity:1; transform:scale(1);
    border-color:var(--accent); animation:talk 2.2s ease-in-out infinite}
  .head[data-speaker="mu"].active{border-color:var(--mu); animation:talkmu 2.2s ease-in-out infinite}
  .head[data-speaker="kotoha"].active{border-color:#ffcf8a}
  @keyframes talk{0%,100%{box-shadow:0 0 0 0 rgba(255,157,77,.5)} 50%{box-shadow:0 0 0 11px rgba(255,157,77,0)}}
  @keyframes talkmu{0%,100%{box-shadow:0 0 0 0 rgba(255,111,176,.6)} 50%{box-shadow:0 0 0 11px rgba(255,111,176,0)}}
  #capwrap{display:flex; flex-direction:column; gap:6px; max-width:min(88vw,1000px)}
  #capname{font-size:clamp(11px,1.3vw,14px); color:var(--accent2); font-weight:700; letter-spacing:.06em}
  #capname.sp-mu{color:var(--mu)}
  /* MU の商品ドロップ演出 */
  .drop-name{font-family:var(--serif); font-size:clamp(34px,7vw,84px); font-weight:800; line-height:1.1;
    color:#fff; text-shadow:0 2px 30px rgba(255,111,176,.45); animation:pop .5s ease-out}
  .drop-price{font-size:clamp(22px,4vw,44px); font-weight:900; color:var(--mu); font-variant-numeric:tabular-nums; margin-top:.1em}
  @keyframes pop{0%{transform:scale(.6);opacity:0} 60%{transform:scale(1.08)} 100%{transform:scale(1);opacity:1}}
  .buylink{display:inline-block; margin-top:14px; padding:9px 22px; border-radius:999px; text-decoration:none;
    font-weight:800; font-size:clamp(13px,1.7vw,18px); color:#0b0c10; background:var(--mu);
    box-shadow:0 8px 28px rgba(255,111,176,.4); transition:transform .15s}
  .buylink:hover{transform:translateY(-2px)}
  #capname.sp-kotoha{color:#ffcf8a}
  /* 実画面(スクショ) */
  .shot{border-radius:14px; box-shadow:0 18px 60px rgba(0,0,0,.6); border:1px solid rgba(255,255,255,.12); object-fit:contain; background:#0c0f15}
  .shot-web{max-width:min(86vw,860px); max-height:54vh}
  .shot-mobile{max-height:58vh; max-width:min(60vw,300px); border-radius:22px}
  /* MCP / コマンド */
  pre.code{font-family:"SFMono-Regular",ui-monospace,Menlo,Consolas,monospace; font-size:clamp(12px,1.7vw,20px);
    background:rgba(8,11,16,.82); border:1px solid var(--line); border-left:3px solid var(--good); border-radius:12px;
    padding:16px 20px; text-align:left; color:#e9eef4; line-height:1.7; max-width:min(92vw,860px); white-space:pre-wrap; backdrop-filter:blur(6px)}
  #captext{font-size:clamp(15px,1.95vw,24px); line-height:1.5; font-weight:500; color:#fff; text-shadow:0 1px 12px rgba(0,0,0,.6)}

  #bar{position:fixed; top:0; left:0; height:3px; background:var(--accent); width:0; transition:width .25s linear; z-index:20}
  #ctl{position:fixed; bottom:8px; left:50%; transform:translateX(-50%); display:flex; gap:12px; align-items:center; z-index:20;
    background:rgba(8,10,14,.7); backdrop-filter:blur(8px); padding:5px 14px; border-radius:999px; border:1px solid var(--line)}
  #ctl button{background:none; border:none; color:var(--fg); font-size:17px; cursor:pointer; padding:3px 7px; opacity:.85}
  #ctl button:hover{opacity:1}
  #cnt{font-size:12px; color:var(--dim); font-variant-numeric:tabular-nums; min-width:42px; text-align:center}
  #hint{position:fixed; bottom:184px; left:50%; transform:translateX(-50%); color:var(--dim); font-size:13px; z-index:20; transition:opacity .8s}

/* ── スマホ最適化 ── */
@media (max-width:640px){
  .slide{ padding:18px 16px 0; gap:11px; }
  #stage{ bottom:158px; }
  #captionbar{ height:158px; padding:0 13px 16px; gap:11px; }
  #hint{ bottom:170px; font-size:12px; padding:0 12px; text-align:center; }
  .head{ width:46px; height:46px; border-width:2px; }
  #captext{ font-size:14.5px; line-height:1.5; max-height:104px; overflow-y:auto; }
  #capname{ font-size:11px; }
  .lead{ font-size:16px; max-width:90vw; line-height:1.7; }
  .meta{ font-size:13px; }
  .note{ font-size:12.5px; max-width:92vw; }
  .shot-web{ max-width:94vw; max-height:44vh; }
  .shot-mobile{ max-width:190px; max-height:48vh; }
  pre.code{ font-size:13px; padding:13px 15px; max-width:94vw; }
  .drop-name{ font-size:46px; } .drop-price{ font-size:30px; }
  .nakama{ gap:26px; } .nakama img{ width:74px; height:74px; }
  #ctl{ bottom:6px; padding:6px 16px; gap:14px; } #ctl button{ font-size:21px; padding:5px 10px; }
  .row{ gap:22px; } .stat .v{ font-size:40px; }
}
.ryozo-pick{display:inline-block;background:rgba(255,217,107,.16);color:#ffd96b;font-weight:800;font-size:clamp(13px,1.6vw,16px);padding:5px 14px;border-radius:999px;margin-bottom:10px}