/* スマホ版（幅760px以下だけに効く）。いまのページに重ねる手直しで、部品は assets/mobile.js が足す。
   土台は docs/design-foundation.md のまま：白地・黒の極太・紫は「いま流れている」ものだけ・角は丸めない（丸は人のアイコンだけ） */
.sp-only,.sp-tab,.sp-sheet{display:none}
/* ネタ帳（neta.html）は共通の assets/drks.css を読まないので、ここで使う名前だけ用意する（値は drks.css と同じ） */
.sp-root{--grey:#6E6E73;--rule:#DADADF;--live:#9146FF;--display:"Dela Gothic One","Zen Kaku Gothic New",sans-serif;--text:"Zen Kaku Gothic New","Hiragino Sans",sans-serif;--gutter:clamp(16px,4vw,48px)}

@media (max-width:760px){
  .sp-only{display:block}

  /* ===== 共通：上はサイト名と配信中の人数だけ。ページの切り替えは画面の下のメニューへ ===== */
  .gh nav{display:none!important}
  .gh-in{flex-wrap:nowrap!important;padding:9px 12px!important}
  body{padding-bottom:calc(62px + env(safe-area-inset-bottom))}
  .sp-tab{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;z-index:1001;
    background:repeating-linear-gradient(to bottom,rgba(255,255,255,.028) 0 1px,transparent 1px 3px),#000;border-top:2px solid var(--live);padding-bottom:env(safe-area-inset-bottom)}
  .sp-tab a,.sp-tab button{appearance:none;background:none;border:0;border-radius:0;color:rgba(255,255,255,.62);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    height:60px;font:400 12px/1 var(--display);letter-spacing:.02em;text-decoration:none;position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .sp-tab svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square}
  .sp-tab [aria-current="page"]{color:#fff}
  .sp-tab [aria-current="page"]::before{content:"";position:absolute;top:-2px;left:24%;right:24%;height:4px;background:var(--live)}
  .sp-tab a:active,.sp-tab button:active{background:#15101F}

  /* 下から出る板（「その他」、ネタ帳の配信者えらび） */
  .sp-sheet{display:block;position:fixed;inset:0;z-index:1003;pointer-events:none}
  .sp-sheet .bg{position:absolute;inset:0;background:rgba(0,0,0,.55);opacity:0;transition:opacity .2s}
  .sp-sheet .pn{position:absolute;left:0;right:0;bottom:0;max-height:82vh;overflow:auto;background:#fff;border-top:4px solid #000;
    padding:10px 16px calc(18px + env(safe-area-inset-bottom));transform:translateY(100%);transition:transform .25s cubic-bezier(.2,.8,.2,1)}
  .sp-sheet.open{pointer-events:auto}.sp-sheet.open .bg{opacity:1}.sp-sheet.open .pn{transform:none}
  .sp-sheet .hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
  .sp-sheet .hd b{font:400 22px/1 var(--display)}
  .sp-sheet .x{width:48px;height:48px;border:0;background:none;font:400 26px/1 var(--text);margin-right:-12px;cursor:pointer}
  .sp-sheet .it{display:block;padding:13px 0 12px;border-top:1px solid var(--rule);text-decoration:none;min-height:56px}
  .sp-sheet .it b{display:block;font:400 19px/1.2 var(--display)}
  .sp-sheet .it span{display:block;font:500 13px/1.55 var(--text);color:var(--grey);margin-top:3px}
  .sp-sheet .it.small b{font:900 15px/1.3 var(--text)}
  .sp-sheet .it.on b{color:var(--live)}
  .sp-sheet .pick{display:flex;align-items:center;gap:12px;min-height:52px;padding:6px 0}
  .sp-sheet .pick img,.sp-sheet .pick i{width:32px;height:32px;border-radius:50%;flex:none;background:#EEE}
  .sp-sheet .pick:first-of-type i{display:none}

  /* ===== 共通の部品：見出し、ネタの1行、折りたたみ ===== */
  .sp-sec{padding:24px 0 22px;border-top:2px solid var(--ink)}
  .sp-sec .hd{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}
  .sp-sec h2{font:400 25px/1.1 var(--display);margin:0}
  .sp-sec .hd a,.sp-more{font:700 14px var(--text);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;white-space:nowrap}
  .sp-more{display:inline-block;margin-top:12px;padding:6px 0}

  .sp-row{display:grid;grid-template-columns:112px 1fr;gap:3px 12px;padding:12px 0;border-bottom:1px solid var(--rule);text-decoration:none;align-items:start}
  .sp-row:first-child{padding-top:4px}
  .sp-row .th{grid-row:1/4;width:112px;aspect-ratio:16/9;background:#000 center/cover no-repeat;color:#fff;display:flex;align-items:center;justify-content:center;
    font:400 14px/1.15 var(--display);text-align:center;padding:6px;overflow:hidden;word-break:keep-all}
  .sp-row b{font:400 19px/1.25 var(--display)}
  .sp-row .m{display:flex;align-items:center;gap:6px;font:700 12px/1.4 var(--text);color:var(--grey)}
  .sp-row .m img{width:18px;height:18px;border-radius:50%;flex:none}
  .sp-row .o{font:500 13px/1.6 var(--text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .sp-row:active b{color:var(--live)}

  .sp-fold>.wrap{position:relative}
  .sp-fold:not(.open)>.wrap{max-height:330px;overflow:hidden}
  .sp-fold:not(.open)>.wrap::after{content:"";position:absolute;left:0;right:0;bottom:0;height:110px;background:linear-gradient(rgba(255,255,255,0),#fff 85%);pointer-events:none}
  .sp-open{display:block;width:calc(100% - 2 * var(--gutter));margin:6px auto 0;height:48px;border:2px solid #000;border-radius:0;background:#fff;color:#000;font:900 15px var(--text);cursor:pointer}
  .sp-fold.open .sp-open{display:none}
  .quiz.sp-fold .sp-open,.sec.sp-fold .sp-open{position:relative;z-index:1}

  /* ===== ホーム ===== */
  main.sp-home{display:flex;flex-direction:column}
  main.sp-home>*{order:20}
  /* PC 版と同じ順（配信中 → ホットシーン → 24時間 → 速報 → 特集 → 新しいネタ → クイズ）。スマホだけの「さがす」は紹介の下、「配信者からたどる」はクイズの前（2026-09-28 利用者の指示） */
  main.sp-home>#hero{order:0} main.sp-home>.intro{order:1} main.sp-home>.sp-find{order:2} main.sp-home>.sp-live{order:3}
  main.sp-home>#hotScenes{order:4} main.sp-home>.sp-o7{order:5} main.sp-home>.sp-o6{order:6} main.sp-home>.sp-o8{order:7}
  main.sp-home>.sp-new{order:8} main.sp-home>.sp-ppl{order:9} main.sp-home>.quiz{order:10}
  main.sp-home>#now,main.sp-home>.sp-hide{display:none}

  /* 流れる言葉の帯：説明を1行に短くし、その分だけ帯を低く（240px → 160px） */
  main.sp-home>#hero{height:160px;min-height:0}
  #heroWaveCap{bottom:6px;font-size:11px;white-space:nowrap}
  #heroWaveCap .sp-only{display:inline}
  #heroWaveCap .sp-pc{display:none}

  /* サイト名：説明は1つにし、公式の3つは1行に */
  .intro{padding:16px 0 4px;border-bottom:0}
  .intro h1{font-size:27px}
  .intro h1 .unof{font-size:12px;border-width:2px}
  .intro p{font-size:13px;margin-top:8px}
  .intro .go{display:none}
  .sp-go{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,.7fr);gap:6px;margin-top:12px}
  .sp-go a{display:flex;align-items:center;justify-content:center;gap:5px;height:40px;padding:0 4px;overflow:hidden;border:1.5px solid var(--ink);background:#fff;color:#000;text-decoration:none;font:900 12px/1 var(--text);white-space:nowrap}
  .sp-go a:active{background:#000;color:#fff}
  .sp-go svg{width:18px;height:18px;flex:none}.sp-go img.drks{height:17px;width:auto;flex:none}

  /* さがす */
  .sp-find{padding:14px 0 18px}
  .sp-find form{display:flex;border:3px solid #000;height:54px;background:#fff}
  .sp-find input{flex:1;min-width:0;border:0;border-radius:0;padding:0 12px;font:700 16px var(--text);background:#fff;color:#000;-webkit-appearance:none;outline:none}
  .sp-find input::placeholder{color:#8A8A90;font-weight:500}
  .sp-find button{width:58px;border:0;border-radius:0;background:#000;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
  .sp-find button svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:square}
  .sp-find form:focus-within{border-color:var(--live)}
  .sp-find .hint{font:500 12px/1.5 var(--text);color:var(--grey);margin:6px 0 0}
  .sp-find .res{margin-top:6px}
  .sp-find .res:empty{display:none}
  .sp-find .cnt{font:700 13px var(--text);color:var(--grey);padding:6px 0 0}

  /* 配信者からたどる：5人の顔を1列に */
  .sp-faces{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px}
  .sp-faces a{display:flex;flex-direction:column;align-items:center;gap:5px;text-decoration:none;font:900 11px/1.25 var(--text);text-align:center;padding:4px 0 2px;min-height:44px}
  .sp-faces img{width:58px;height:58px;border-radius:50%;background:#eee;border:3px solid #fff;outline:1.5px solid var(--rule)}
  .sp-faces a.on img{border-color:var(--live);outline-color:var(--live)}
  .sp-faces small{display:block;min-height:1.3em;font:900 10px var(--text);color:var(--live)}

  /* いま配信中：配信中の人全員の画面を縦に並べ、音なしで同時に流す */
  .sp-live[hidden]{display:none!important}
  .sp-live{padding-top:18px}
  .sp-live .total{font:400 26px/1.1 var(--display);margin:0 0 12px}
  .sp-live .total small{display:block;font:700 12px/1.5 var(--text);color:var(--grey);margin-top:4px}
  .sp-live .tiles{display:flex;flex-direction:column;gap:14px;margin:0 calc(-1 * var(--gutter))}
  .sp-live .tile{background:#000;color:#fff}
  .sp-live .stage{position:relative;overflow:hidden;background:#111;height:220px}
  .sp-live .stage iframe{position:absolute;left:0;top:0;border:0;transform-origin:0 0}
  .sp-live .meta{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:0 10px;align-items:center;padding:10px var(--gutter) 12px;border-top:3px solid var(--live)}
  .sp-live .ic{width:40px;height:40px;border-radius:50%;border:2px solid var(--live)}
  .sp-live .nm{font:400 17px/1.2 var(--display)}
  .sp-live .nm em{font:900 12px var(--text);font-style:normal;color:#C9A8FF;margin-left:6px}
  .sp-live .tt{font:500 12px/1.45 var(--text);color:#BDBDC4;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
  .sp-live .ob{padding:8px 10px 8px 8px;font-size:12px;gap:6px}.sp-live .ob>svg{width:17px;height:17px}
  .sp-live .upd{font:500 12px var(--text);color:var(--grey);margin:10px 0 0}

  /* ===== 配信者 ===== */
  .ptop{padding:20px var(--gutter) 14px!important}   /* いまのサイトでは左右の余白が0になっている */
  .ptop h1{font-size:44px!important;margin-bottom:0}
  .ptop p{font-size:13px!important;margin-top:6px}
  .sp-filter{display:flex;gap:8px;margin:14px 0 4px}
  .sp-filter button{height:44px;padding:0 18px;border:2px solid #000;border-radius:0;background:#fff;color:#000;font:900 15px var(--text);cursor:pointer}
  .sp-filter button.on{background:#000;color:#fff}
  .sp-filter button em{font-style:normal;color:var(--live);margin-left:4px}
  .sp-filter button.on em{color:#C9A8FF}
  body.sp-people #people{padding-top:4px}
  body.sp-people:not(.sp-detail) #pls{display:none}
  .sp-plist{border-top:0}
  .sp-plist a{display:grid;grid-template-columns:68px 1fr 22px;gap:2px 14px;align-items:center;min-height:92px;padding:12px 0;border-bottom:1px solid var(--rule);text-decoration:none}
  .sp-plist img{grid-row:1/3;width:68px;height:68px;border-radius:50%;background:#eee;border:3px solid #fff;outline:1.5px solid var(--rule)}
  .sp-plist a.on img{border-color:var(--live);outline-color:var(--live)}
  .sp-plist b{font:400 24px/1.1 var(--display);align-self:end}
  .sp-plist b em{display:inline-block;vertical-align:4px;margin-left:8px;background:var(--live);color:#fff;font:900 11px/1 var(--text);font-style:normal;padding:4px 6px}
  .sp-plist span{font:500 13px/1.5 var(--text);color:var(--grey);align-self:start;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
  .sp-plist i{grid-row:1/3;grid-column:3;width:10px;height:10px;border-right:2.5px solid #000;border-top:2.5px solid #000;transform:rotate(45deg)}
  .sp-plist a[hidden]{display:none}
  .sp-plist a:active{background:#F4F4F6}
  .sp-plist+.note,.sp-soon{font:500 13px/1.6 var(--text);color:var(--grey);margin:14px 0 0}

  /* 1人を開いたとき：その人の記録（いまのページの中身）だけを出す */
  body.sp-detail .ptop,body.sp-detail .sp-filter,body.sp-detail .sp-plist,body.sp-detail .sp-soon{display:none}
  body.sp-detail #pls>.pl:not(.sp-cur),body.sp-detail #pls>.note{display:none}
  .sp-back{display:none}
  body.sp-detail .sp-back{display:flex;align-items:center;gap:10px;height:48px;padding:0;border:0;border-bottom:2px solid #000;background:#fff;width:100%;font:900 15px var(--text);color:#000;cursor:pointer;margin-top:4px}
  .sp-back i{width:9px;height:9px;border-left:2.5px solid #000;border-bottom:2.5px solid #000;transform:rotate(45deg);margin-left:4px}
  body.sp-detail .pl{padding-top:18px;grid-template-columns:1fr;gap:14px;border-top:0}
  body.sp-detail .pl .ph{width:112px;height:112px;border-radius:50%;background-size:cover}
  body.sp-detail .pl .ph .st{display:none}
  body.sp-detail .pl .nm{font-size:44px}


  /* 1人のページの特集の箱（大会と企画・MAD など）：全部見せ、動画は横にスワイプして見る */
  body.sp-detail .pl>*{min-width:0}
  body.sp-detail .special{padding:16px 14px;margin-top:22px;min-width:0;max-width:100%}
  body.sp-detail .special .vg{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:12px -14px 0;padding:0 14px 6px;scrollbar-width:none}
  body.sp-detail .special .vg::-webkit-scrollbar{display:none}
  body.sp-detail .special .vg a{flex:0 0 240px;max-width:75vw;scroll-snap-align:start}
  body.sp-detail .special .nw a{font-size:16px;padding:6px 10px}

  /* ホームの「新しく出てきたネタ」：いちばん新しい1件は画像を大きく */
  .sp-big{display:block;text-decoration:none;margin:2px 0 6px;border-bottom:1px solid var(--rule);padding-bottom:14px}
  .sp-big .th{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:16/9;background:#000 center/cover no-repeat;color:#fff;font:400 34px/1.15 var(--display);text-align:center;padding:12px;word-break:keep-all}
  .sp-big .tx{display:block;margin-top:10px}
  .sp-big b{display:block;font:400 26px/1.2 var(--display)}
  .sp-big .m{display:flex;align-items:center;gap:6px;font:700 12px/1.4 var(--text);color:var(--grey);margin-top:4px}
  .sp-big .m img{width:18px;height:18px;border-radius:50%}
  .sp-big .o{display:block;font:500 14px/1.65 var(--text);margin-top:4px}
  .sp-new .sp-row .th{width:128px}.sp-new .sp-row{grid-template-columns:128px 1fr}

  /* 1年をたどる：遊んだゲームは、小さな画像と名前のカードを4列に詰めて、1画面で多く見られるように。期間・回数・月ごとの帯は出さない */
  .games{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px 8px!important}
  .gwrap{display:flex;flex-direction:column;min-width:0}
  .gcard{display:flex!important;flex-direction:column;gap:5px!important;padding:0!important;border:0!important;background:none!important;border-radius:0!important;width:100%}
  .gcard .art{width:100%!important;height:auto!important;aspect-ratio:3/4;border-radius:0!important;padding:4px!important;font-size:10px!important;line-height:1.2!important;align-items:flex-end}
  .gcard .art img{width:calc(100% + 8px)!important;height:calc(100% + 8px)!important;margin:-4px!important}
  .gcard b{font-weight:900!important;font-size:11px!important;line-height:1.3!important;display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
  .gcard .per,.gcard .cnt,.gcard .mbar,.gcard .mlab{display:none!important}
  .gcard:active .art{outline:3px solid var(--live);outline-offset:-3px}
  .gwrap.sp-more-g{display:none}
  .gmore{width:100%!important;margin:4px 0 20px!important}
  .gshop{display:flex;align-items:center;justify-content:center;gap:4px;min-height:32px;margin-top:4px;padding:0 4px;border:1.5px solid #000;font:900 10px var(--text);color:#000;text-decoration:none}
  .gshop .pr{font:900 10px var(--text);border:1px solid #6E6E73;color:#6E6E73;padding:1px 4px}

  /* ===== ネタ帳の一覧：見出し → さがす → 配信者えらび → 結果 → ランダム・クイズ ===== */
  .ix{display:flex;flex-direction:column}
  .ix>.crumb{display:none}
  .ix>h1{order:1;font-size:44px!important;margin:16px 0 0!important}
  .ix>.lead{order:2;font-size:13px!important;margin:6px 0 12px!important}
  .ix>.nsearch{order:3;margin:0!important}
  .ix>.sp-nf{order:4}
  .ix>#ixb{display:none}
  .ix>.sp-res{order:5}
  .ix>.ixbar{order:6;margin:22px 0 8px}
  .ix>.who{display:none!important}
  .nsearch{position:relative}
  .nsearch input{max-width:none!important;height:54px;font-size:16px!important;border-width:3px!important;border-radius:0;-webkit-appearance:none}
  .nsearch span{position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none}
  .sp-nf{display:flex;gap:8px;margin:10px 0 6px}
  .sp-nf button{flex:1;display:flex;align-items:center;justify-content:space-between;gap:8px;height:46px;padding:0 12px;border:2px solid #000;border-radius:0;background:#fff;color:#000;font:900 14px var(--text);cursor:pointer;min-width:0}
  .sp-nf button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .sp-nf button img{width:22px;height:22px;border-radius:50%;flex:none}
  .sp-nf button i{flex:none;width:8px;height:8px;border-right:2px solid #000;border-bottom:2px solid #000;transform:rotate(45deg);margin:-4px 4px 0 0}
  .sp-nf button.set{border-color:var(--live)}
  .sp-nf .clr{flex:none;width:auto;padding:0 12px;text-decoration:underline;text-underline-offset:3px;border-color:transparent}
  .sp-res .lab{display:flex;justify-content:space-between;font:900 13px var(--text);color:var(--grey);padding:10px 0 8px;border-bottom:2px solid #000;margin-bottom:4px}
  .sp-res .none{font:700 14px/1.7 var(--text);padding:16px 0}
  .sp-res .sp-row:first-of-type{padding-top:12px}
  .ix>.ixbar a{min-height:44px;display:inline-flex;align-items:center}

  /* ===== ネタの1語：広まった経緯を縦に読む ===== */
  .sp-view{display:flex;margin:14px 0 16px;border:2px solid #000;width:max-content}
  .sp-view button{height:44px;padding:0 16px;border:0;border-radius:0;background:#fff;color:#000;font:900 14px var(--text);cursor:pointer}
  .sp-view button.on{background:#000;color:#fff}
  .sp-hidden{display:none!important}
  .sp-tl{list-style:none;margin:0;padding:0 0 0 20px;border-left:3px solid #000}
  .sp-tl>li{position:relative;padding:0 0 20px}
  .sp-tl>li::before{content:"";position:absolute;left:-29px;top:4px;width:15px;height:15px;background:#000}
  .sp-tl>li.org::before{background:var(--live)}
  .sp-tl time{display:block;font:400 18px/1.2 var(--display)}
  .sp-tl time small{font:900 12px var(--text);margin-left:8px;color:var(--live)}
  .sp-tl .ev{margin-top:8px;padding-top:8px;border-top:1px solid var(--rule)}
  .sp-tl .ev:first-of-type{border-top:0;padding-top:0}
  .sp-tl .ev small{display:block;font:900 12px/1.4 var(--text);color:var(--grey)}
  .sp-tl .ev p{margin:2px 0 0;font:500 15px/1.7 var(--text)}
  .sp-tl .ev a{display:inline-block;margin-top:4px;padding:6px 0;font:700 13px var(--text);text-underline-offset:3px}
  .sp-tl .more{display:block;width:100%;height:46px;border:2px solid #000;border-radius:0;background:#fff;font:900 14px var(--text);cursor:pointer;margin-left:-20px;width:calc(100% + 20px)}

  /* 光・にじみは、サイト全体でやめた（assets/header.js の .ob、docs/design-foundation.md）。暗い帯の上の公式ボタンだけ白地に */
  .sp-live .ob.sm{background:#fff}

}
@media (max-width:760px) and (prefers-reduced-motion:reduce){.sp-sheet .bg,.sp-sheet .pn{transition:none}}