/* =====================================================================
   HAIRA v2 — Creators（クリエイター一覧）: design lab creators/creators.css + production additions at the end
   ===================================================================== */

/* 固定ヘッダー（64px）＋絞り込みバーの下に、フォーカスやアンカーの移動先が隠れないようにする */
html{scroll-padding-top:140px}

/* ---------- 見出しと検索 ---------- */
.lhero{position:relative;overflow:clip;isolation:isolate;padding:clamp(108px,11vw,148px) 0 clamp(28px,3vw,40px)}
.lhero__bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.lhero .blob{position:absolute;border-radius:50%}
.lhero .b1{width:56vw;height:56vw;right:-16vw;top:-30vw;background:radial-gradient(closest-side,rgba(0,198,217,.18),transparent)}
.lhero .b2{width:44vw;height:44vw;left:-18vw;top:-6vw;background:radial-gradient(closest-side,rgba(255,79,158,.12),transparent)}
.lhero__in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:end}
.lhero__title{margin:14px 0 16px;font-size:clamp(40px,4.6vw + 12px,84px)}
.lhero__lead{margin-bottom:26px}
.lhero__art{position:relative;width:clamp(200px,22vw,300px);margin-bottom:-40px}
.lhero__art img{width:100%;-webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent);mask-image:linear-gradient(to bottom,#000 72%,transparent);animation:float 6.5s ease-in-out infinite}
.lhero__bubble{position:absolute;z-index:1;left:-34%;top:14%;padding:12px 16px;border-radius:18px 18px 4px 18px;background:#fff;box-shadow:var(--sh-2);font-size:14px;font-weight:900;line-height:1.5;white-space:nowrap}
@keyframes float{50%{transform:translateY(-8px)}}

.search{position:relative;display:flex;align-items:center;gap:10px;width:min(100%,600px);height:64px;padding:0 8px 0 20px;border-radius:var(--r-pill);background:#fff;
  border:1.5px solid var(--line-2);box-shadow:var(--sh-2);transition:border-color .2s,box-shadow .2s}
.search:focus-within{border-color:var(--violet);box-shadow:0 0 0 4px var(--violet-soft),var(--sh-2)}
.search__ico{width:22px;height:22px;color:var(--ink-3)}
.search input{flex:1;min-width:0;height:100%;border:0;background:none;outline:0;font:inherit;font-size:16px;font-weight:700;color:var(--ink)}
.search input::placeholder{color:var(--ink-3);font-weight:500}
.search input::-webkit-search-cancel-button{-webkit-appearance:none}
.search__btn{min-height:48px;padding:0 26px}

/* キャラクターの問いかけに答えるチップ */
.ask{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.ask__chip{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 16px 0 12px;border-radius:var(--r-pill);background:rgba(255,255,255,.7);border:1.5px dashed var(--line-2);
  font-size:13.5px;font-weight:800;color:var(--ink-2);transition:background .2s,border-color .2s,color .2s,transform .25s var(--ease-spring)}
.ask__chip .ico{width:18px;height:18px;color:var(--violet)}
.ask__chip:hover{border-color:var(--violet);border-style:solid;color:var(--violet-deep);transform:translateY(-2px)}
.ask__chip[aria-pressed="true"]{background:var(--violet-deep);border:1.5px solid var(--violet-deep);color:#fff}
.ask__chip[aria-pressed="true"] .ico{color:#fff}
.lhero__bubble.is-pop{animation:pop .5s var(--ease-spring)}
@keyframes pop{0%{transform:scale(.86)}100%{transform:none}}

/* ---------- 絞り込みバー（スクロールしても上に残る） ---------- */
.fbar{position:sticky;top:64px;z-index:50;padding:12px 0;background:color-mix(in srgb,var(--paper) 86%,transparent);backdrop-filter:saturate(1.5) blur(14px);-webkit-backdrop-filter:saturate(1.5) blur(14px);
  border-bottom:1px solid var(--line);transition:top .35s var(--ease-out)}
html.hdr-hidden .fbar{top:0}
.fbar__in{display:flex;align-items:center;gap:12px}
.fbar__genres{display:flex;gap:8px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;padding:2px}
.fbar__genres::-webkit-scrollbar{display:none}
/* 横にはみ出しているときだけ、続きがある側をぼかす（JSが is-l / is-r を付ける） */
.fbar__genres{--fl:0px;--fr:0px}
.fbar__genres.is-l{--fl:24px}
.fbar__genres.is-r{--fr:32px}
.fbar__genres.is-l,.fbar__genres.is-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--fl),#000 calc(100% - var(--fr)),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--fl),#000 calc(100% - var(--fr)),transparent)}
.gchip,.tgl,.opts button,.apill{display:inline-flex;align-items:center;gap:7px;flex:none;min-height:40px;padding:0 16px;border-radius:var(--r-pill);background:#fff;border:1.5px solid var(--line-2);
  font-size:13.5px;font-weight:800;color:var(--ink-2);white-space:nowrap;transition:background .2s,border-color .2s,color .2s,transform .2s var(--ease-out)}
.gchip:hover,.tgl:hover,.opts button:hover{border-color:var(--violet);color:var(--violet-deep)}
.gchip[aria-pressed="true"],.opts button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.tgl .ico{width:16px;height:16px}
.tgl[aria-pressed="true"]{background:var(--violet-deep);border-color:var(--violet-deep);color:#fff}
.fbar__tools{display:flex;align-items:center;gap:8px;flex:none}
.sel{position:relative;display:inline-flex}
.sel select{appearance:none;-webkit-appearance:none;min-height:40px;padding:0 38px 0 16px;border-radius:var(--r-pill);background:#fff;border:1.5px solid var(--line-2);font:inherit;font-size:13.5px;font-weight:800;color:var(--ink-2);cursor:pointer}
.sel select:hover{border-color:var(--violet)}
.sel .ico{position:absolute;right:13px;top:50%;width:16px;height:16px;margin-top:-8px;pointer-events:none;color:var(--ink-3)}
.fbar__open{display:none;align-items:center;gap:8px;flex:none;min-height:40px;padding:0 14px;border-radius:var(--r-pill);background:var(--ink);color:#fff;font-size:13.5px;font-weight:800}
.fbar__open .ico{width:18px;height:18px}
.fbar__badge{display:grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--pink-deep);font-size:12px}
.fbar__badge[hidden]{display:none}
@media (max-width:1099px){ .fbar__tools{display:none} .fbar__open{display:inline-flex} }

/* ---------- 結果 ---------- */
.results{padding:28px 0 var(--section)}
.results__head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 20px;margin-bottom:22px;min-height:40px}
.results__count{font-size:15px;font-weight:800}
.results__count:focus:not(:focus-visible){outline:0}
.results__count b{font-family:var(--f-latin);font-size:26px;margin-right:4px}
.results__active{display:flex;flex-wrap:wrap;gap:8px}
.apill{position:relative;min-height:34px;padding:0 10px 0 14px;background:var(--violet-soft);border-color:transparent;color:var(--violet-deep);font-size:12.5px}
.apill::after{content:'';position:absolute;inset:-2px -3px}
.apill .ico{width:15px;height:15px}
.apill:hover{background:#DCD3FF}
.apill--clear{background:none;color:var(--ink-3);text-decoration:underline;text-underline-offset:3px;padding:0 6px}
.apill--clear:hover{background:none;color:var(--ink)}
.results__note{margin-top:28px;font-size:12.5px;color:var(--ink-3)}

/* 一覧のカード：PCは格子、スマホは横長の行 */
.cgrid--list{grid-template-columns:repeat(4,minmax(0,1fr))}
.cgrid--list .ccard.is-new{animation:card-in .6s var(--ease-out) both;animation-delay:calc(var(--i,0) * 50ms)}
@keyframes card-in{from{opacity:0;transform:translateY(16px)}}
@media (max-width:1199px){ .cgrid--list{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:899px){ .cgrid--list{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:767px){
  .cgrid--list{display:grid;overflow:visible;margin:0;padding:0;gap:14px}
  .cgrid--list .ccard{flex:none}
}
/* スマホ縦、または横向きのスマホ（高さが低いタッチ端末）は横長の行にする */
@media (max-width:599px), (max-height:500px) and (pointer:coarse){
  .cgrid--list{grid-template-columns:1fr;gap:10px}
  .cgrid--list .ccard__in{display:grid;grid-template-columns:64px minmax(0,1fr);grid-template-areas:"ava badges" "ava body";column-gap:14px;row-gap:6px;padding:16px;border-radius:20px}
  .cgrid--list .ccard__media{display:contents}
  .cgrid--list .ccard__media img,.cgrid--list .ccard__media::after{display:none}
  .cgrid--list .ccard__badges{grid-area:badges;position:static;gap:6px;flex-wrap:wrap}
  .cgrid--list .ccard__badges .chip{min-height:26px;padding:0 10px;font-size:12px;background:var(--paper-3);backdrop-filter:none}
  .cgrid--list .ccard__badges .chip--pink{background:var(--pink-soft)}
  .cgrid--list .ccard__ava{grid-area:ava;width:64px;height:64px;margin:0;border-width:3px;font-size:22px;align-self:start}
  .cgrid--list .ccard__body{grid-area:body;padding:0;gap:6px}
  .cgrid--list .ccard__name{font-size:16.5px}
  .cgrid--list .ccard__copy{-webkit-line-clamp:2;min-height:0;font-size:12.5px;line-height:1.65}
  .cgrid--list .ccard__chips .chip{min-height:26px;padding:0 10px;font-size:12px}
  .cgrid--list .ccard__meta{padding-top:8px}
  .cgrid--list .ccard__price{font-size:18px}
}

/* 見つからなかったとき */
.empty{display:flex;align-items:center;gap:clamp(16px,3vw,40px);padding:clamp(24px,4vw,48px);border-radius:var(--r-l);background:#fff;border:1.5px dashed var(--line-2)}
.empty[hidden]{display:none}
.empty img{width:clamp(120px,16vw,180px);flex:none;-webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent);mask-image:linear-gradient(to bottom,#000 70%,transparent)}
.empty h3{font-size:clamp(17px,1.2vw + 12px,22px);font-weight:var(--fw-heading);line-height:1.5;margin-bottom:6px}
.empty p{color:var(--ink-2);font-size:14.5px;margin-bottom:18px}
.empty h3 .nw{display:inline-block}
@media (max-width:599px){
  /* 縦に積む。イラストは左上に小さく残し、文と見出しは横幅いっぱいに使う */
  .empty{flex-direction:column;align-items:flex-start;gap:6px;padding:20px 20px 24px}
  .empty img{width:88px}
  .empty h3{font-size:16.5px}
  .empty p{font-size:14px;margin-bottom:14px}
}

/* ---------- スマホ：絞り込みシート ---------- */
.sheet{position:fixed;inset:0;z-index:210}
.sheet__bg{position:absolute;inset:0;background:rgba(18,14,40,.45);backdrop-filter:blur(4px);animation:fade-in .3s ease}
.sheet__panel{position:absolute;left:0;right:0;bottom:0;max-height:88svh;display:flex;flex-direction:column;background:#fff;border-radius:28px 28px 0 0;box-shadow:0 -20px 60px rgba(18,14,40,.25);animation:sheet-up .5s var(--ease-out)}
@keyframes sheet-up{from{transform:translateY(100%)}}
.sheet__head{display:flex;align-items:center;justify-content:space-between;padding:18px 16px 8px 22px;flex:none}
.sheet__head h2{font-size:19px;font-weight:var(--fw-heading)}
.sheet__head::before{content:'';position:absolute;left:50%;top:8px;width:40px;height:4px;margin-left:-20px;border-radius:4px;background:var(--line-2)}
.sheet__x{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--paper-3)}
.sheet__x .ico{width:20px;height:20px}
.sheet__body{overflow-y:auto;padding:6px 22px 8px;overscroll-behavior:contain}
.sheet fieldset{border:0;margin:0 0 22px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.sheet legend{font-family:var(--f-heading);width:100%;margin-bottom:10px;font-size:13px;font-weight:var(--fw-heading-s);color:var(--ink-2)}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.sheet__foot{display:grid;grid-template-columns:1fr 1.6fr;gap:10px;padding:14px 18px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--line);flex:none}
.sheet__foot .btn{min-height:52px;padding:0 16px}
body.sheet-open{overflow:hidden}

/* ---------- スマホ ---------- */
@media (max-width:767px){
  .lhero{padding:84px 0 18px}
  /* minmax(0,1fr)：検索フォームの最小幅より列が狭くても、はみ出さずに縮む */
  .lhero__in{grid-template-columns:minmax(0,1fr)}
  .lhero__copy{position:relative;z-index:1}
  .lhero__title{margin:10px 0;font-size:clamp(34px,10vw,44px)}
  .lhero__lead{font-size:14px;line-height:1.8;margin-bottom:16px}
  .lhero__art{position:absolute;right:-6px;top:116px;width:clamp(100px,30vw,150px);margin:0;z-index:0}
  .lhero__bubble{display:none}
  .search{height:58px;padding-left:16px}
  .search__btn{padding:0 18px}
  /* スマホでは吹き出しが出ないので、同じ条件を選べる「かんたん絞り込み」は省き、一覧を早く見せる（条件は絞り込みシートにすべてある） */
  .ask{display:none}
  .fbar{top:64px;padding:8px 0}
  .results{padding-top:20px}
  .results__count b{font-size:22px}
}
/* 指で操作する画面：絞り込みの部品は高さ44px（条件の × は見た目40px＋周囲2pxの当たり判定で44px） */
@media (max-width:767px), (pointer:coarse){
  .gchip,.tgl,.opts button,.fbar__open,.sel select{min-height:44px}
  .apill{min-height:40px;padding:0 12px 0 14px}
  .apill--clear{padding:0 10px}
  .ask__chip{min-height:44px}
}
@media (max-width:359px){
  .search{gap:8px;padding-left:14px}
  .search__btn{padding:0 14px}
  /* 狭い画面ではアイコンだけにしてジャンルの帯を広げる（文字は読み上げ用に残す） */
  .fbar__open{position:relative;justify-content:center;width:44px;padding:0;gap:0;font-size:0}
  .fbar__open .ico{width:20px;height:20px}
  .fbar__badge{position:absolute;top:-4px;right:-4px}
  /* 320px前後ではイラストの耳が見出し上の「クリエイター一覧」に触れるので、少し下げる（浮遊アニメの最上点でも離す） */
  .lhero__art{top:126px}
}
/* 横向きのスマホ：見出しを詰め、カードは2列の横長の行にする */
@media (max-height:500px) and (pointer:coarse){
  .lhero{padding:84px 0 16px}
  .lhero__title{margin:8px 0;font-size:40px}
  .lhero__lead{margin-bottom:16px}
  .ask,.lhero__art{display:none}
  .fbar{padding:8px 0}
}
@media (max-height:500px) and (pointer:coarse) and (min-width:600px){
  .cgrid--list{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- スマホの本文は 16px 以上・補足は 13px 以上（2026-10-04b） ---------- */
@media (max-width:767px){
  .lhero__lead{font-size:16px}
  .cgrid--list .ccard__copy,.results__note{font-size:13px}
}

/* ---------- r7：パンくず・一覧の終わり（2026-10-04） ---------- */
/* パンくず（トップ › クリエイター一覧）。見出しの帯が高くならないよう、上の余白を詰める */
.lhero{padding-top:clamp(84px,7vw,104px)}
.lhero__crumbs{margin-bottom:10px}
@media (max-width:767px){
  .lhero{padding-top:68px}
  .lhero__crumbs{margin-bottom:2px}
  .lhero__art{top:150px}
}

/* 表示中の人数（「9人中 9人を表示しています」） */
.results__shown{margin-top:24px;font-size:14px;font-weight:700;color:var(--ink-2)}
.results__shown:empty{display:none}

/* 一覧の最後の行のあまり：次にできることの案内（キャラクターは左） */
.cgrid--list>.cend{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:clamp(14px,2vw,28px);min-width:0;overflow:hidden;
  padding:clamp(20px,2.4vw,32px);border-radius:var(--r-l);background:linear-gradient(160deg,#F3EFFF 0%,#FFF1F7 100%);border:1.5px dashed var(--line-2)}
.cend__art{width:clamp(120px,13vw,210px);align-self:end;margin-bottom:calc(clamp(20px,2.4vw,32px) * -1)}
.cend__art img{width:100%;-webkit-mask-image:linear-gradient(to bottom,#000 80%,transparent);mask-image:linear-gradient(to bottom,#000 80%,transparent)}
.cend__body{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0}
.cend__t{font-family:var(--f-heading);font-size:clamp(17px,.6vw + 13px,21px);font-weight:var(--fw-heading);line-height:1.5;text-wrap:balance}
.cend__body p:not(.cend__t){max-width:30em;font-size:15px;line-height:1.8;color:var(--ink-2)}
.cend__chips{display:flex;flex-wrap:wrap;gap:8px}
.cend__chips .apill{min-height:40px;font-size:14px}
.cend.is-narrow{grid-template-columns:minmax(0,1fr);align-content:end}
.cend.is-narrow .cend__art{order:2;width:120px;margin-top:4px}

/* =====================================================================
   Production additions (v2): filters are links / GET forms (production parameters), so the state is
   aria-current on links instead of aria-pressed on buttons; game suggestions; no-JS filter sheet.
   ===================================================================== */
.gchip[aria-current="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.tgl[aria-current="true"]{background:var(--violet-deep);border-color:var(--violet-deep);color:#fff}
.ask__chip[aria-current="true"]{background:var(--violet-deep);border:1.5px solid var(--violet-deep);color:#fff}
.ask__chip[aria-current="true"] .ico{color:#fff}
a.gchip,a.tgl,a.ask__chip,a.apill,a.fbar__open{text-decoration:none}
.fbar__tools form.sel{margin:0}
.fbar__tools .sel noscript .btn{margin-left:6px}

/* production hint: titles of registered games can be searched */
.cl-hint{display:flex;align-items:flex-start;gap:6px;max-width:600px;margin-top:10px;font-size:13px;line-height:1.7;font-weight:700;color:var(--ink-3)}
.cl-hint .ico{flex:none;width:16px;height:16px;margin-top:3px;color:var(--violet)}

/* game suggestions (AJAX ts_search_registered_games) */
.cl-ac{position:absolute;left:12px;right:12px;top:calc(100% + 8px);z-index:60;display:grid;padding:6px;border-radius:18px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-3);max-height:min(60vh,360px);overflow-y:auto}
.cl-ac[hidden]{display:none}
.cl-ac__it{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:8px 12px;border-radius:12px;text-align:left;font-size:14.5px;font-weight:800;color:var(--ink)}
.cl-ac__it .ico{flex:none;width:18px;height:18px;color:var(--violet)}
.cl-ac__it span{min-width:0;flex:1;overflow-wrap:anywhere}
.cl-ac__it small{flex:none;font-size:12.5px;font-weight:700;color:var(--ink-3)}
.cl-ac__it:hover,.cl-ac__it:focus-visible,.cl-ac__it.is-active{background:var(--violet-soft);color:var(--violet-deep);outline:0}

/* filter sheet: a GET form. Without JS it opens with #sheet (:target); creators.js turns it into the lab sheet */
.sheet.is-nojs:not(:target){display:none}
.sheet[hidden]{display:none}
a.sheet__bg{display:block}
a.sheet__x{color:var(--ink)}
.opt{position:relative;display:inline-flex;flex:none}
.opt input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.opt span{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 16px;border-radius:var(--r-pill);background:#fff;border:1.5px solid var(--line-2);
  font-size:13.5px;font-weight:800;color:var(--ink-2);white-space:nowrap;transition:background .2s,border-color .2s,color .2s}
.opt span .ico{width:16px;height:16px}
.opt:hover span{border-color:var(--violet);color:var(--violet-deep)}
.opt input:checked+span{background:var(--ink);border-color:var(--ink);color:#fff}
.opt--tgl input:checked+span{background:var(--violet-deep);border-color:var(--violet-deep)}
.opt input:focus-visible+span{outline:3px solid var(--violet);outline-offset:2px}
.sheet__foot .btn{display:inline-flex;align-items:center;justify-content:center}

/* results */
.results__shown{margin-top:24px}
.cl-pager{margin-top:28px}
.cl-pager .c-pager__info{margin-top:10px;text-align:center;font-size:13px;font-weight:700;color:var(--ink-3)}
.empty .btn{display:inline-flex}
@media (max-width:767px){ .cl-hint{font-size:13px} }
@media (max-width:599px){ .cl-hint{display:none} } /* phones: the placeholder already says 名前・ゲーム名 (lab: nothing between the search and the list) */
.sheet__foot{grid-template-columns:auto minmax(0,1fr)}
.sheet__foot .btn{white-space:nowrap}