/* site.css — 共通スタイル（docs/mockups v2.1「藍の港」をベースに共通化）
   色はすべて theme.css の CSS変数（--indigo-deep 等）を参照する。
   theme.css は generate.php が site_settings の theme_* から出力するため、ここでは色の生値を書かない。
   フォールバック値は var(--x, フォールバック) で最低限のみ用意（theme.css読み込み前の一瞬の崩れ防止）。 */

:root{
  --ink:#2d2f4e; --sub:#7d81ab;
  --premium-label:#795400;
  --radius:10px;
  --serif:"Shippori Mincho","Yu Mincho","Hiragino Mincho ProN","MS PMincho",serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto}
body{font-family:"Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;background:var(--bg,#f3f4fa);color:var(--ink);line-height:1.7}
/* 操作不能時も有料オプションと判別できるよう、入力と独立した視認性を保つ。 */
.premium-label{display:inline-flex;align-items:center;flex:0 0 auto;padding:1px 8px;border:1px solid var(--premium-label);border-radius:999px;background:#f8ebbd;background:linear-gradient(180deg,color-mix(in srgb,var(--premium-label) 5%,#fff),color-mix(in srgb,var(--premium-label) 18%,#fff));color:var(--premium-label);font-size:11px;font-weight:700;line-height:1.5;white-space:nowrap;box-shadow:0 1px 2px color-mix(in srgb,var(--premium-label) 22%,transparent);text-shadow:0 1px 0 rgba(255,255,255,.75)}
.premium-option{display:inline-flex;align-items:center;gap:5px;flex-wrap:wrap}
.premium-remaining-value{color:var(--indigo,#22265f);font-weight:700}
.pro-mode-options{display:flex;flex-direction:column;align-items:flex-start;gap:7px;margin-top:8px}
.pro-mode-options label{display:inline-flex;align-items:center;gap:5px;flex-wrap:wrap;font-size:13px}
.pro-test-warning{margin:8px 0 0;padding:9px 12px;border:1px solid var(--new,#b3123e);border-radius:7px;background:#fdecec;color:var(--new,#b3123e);font-size:12px;font-weight:700;line-height:1.7}
.pro-visibility-disabled{opacity:.55}
a{color:var(--link,#22265f);text-decoration:none}
a:hover{color:var(--link-hover,#3a3f9e)}
.wrap{max-width:980px;margin:0 auto;padding:0 16px}
body.narrow .wrap{max-width:880px}

/* 地の文リンク（本文・カード・パネル内）: 管理画面のtheme_link/theme_link_hoverで色設定可能にする。
   ヘッダー/フッターの白リンクやボタン化リンク（.cta/.play-btn/.chip/.tagcloud a/.btn-*等）は
   別途固有スタイルで上書きされるため、ここでの指定は影響しない。 */
.desc a,.blurb a,.panel p a,.cmt a,.archive-note a,article p a,main p a{
  color:var(--link,#22265f);text-decoration:underline}
.desc a:hover,.blurb a:hover,.panel p a:hover,.cmt a:hover,.archive-note a:hover,article p a:hover,main p a:hover{
  color:var(--link-hover,#3a3f9e)}

/* ─── ヘッダー ─── */
header{
  /* 背景は「左色→中色→右色」の横グラデーション（管理画面 theme_header_* で変更可能）。
     以前は右側を暗くする固定オーバーレイが重なって指定色（特に右色）が隠れていたため撤去し、
     指定した色がそのまま最後まで出るようにした。上に薄い星エフェクトだけ残す。 */
  background:
    radial-gradient(1.5px 1.5px at 6% 35%, rgba(255,255,255,.85), transparent 60%),
    radial-gradient(1px 1px at 13% 70%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1px 1px at 22% 25%, rgba(255,255,255,.65), transparent 60%),
    radial-gradient(1.5px 1.5px at 31% 60%, rgba(255,255,255,.45), transparent 60%),
    linear-gradient(165deg,var(--header-from,#343a8c) 0%,var(--header-mid,#232764) 45%,var(--header-to,#161936) 100%);
  border-bottom:1px solid var(--gold-soft,#d6c284)}
/* ヘッダー文字は色によらず読めるよう、薄い影で保護する（明るめの色を選んでも潰れにくく） */
nav a{text-shadow:0 1px 2px rgba(0,0,0,.35)}
.logo-img{display:block;max-height:38px;width:auto;max-width:220px}
@media(max-width:640px){.logo-img{max-height:28px;max-width:120px}}

.hd{display:flex;align-items:center;max-width:980px;margin:0 auto;padding:8px 16px;gap:16px;flex-wrap:wrap}
@media(max-width:640px){.hd{padding:6px 6px;gap:4px;}}

.brand{display:flex;flex-direction:column;line-height:1.25}
.logo-link{display:block}
.logo{font-family:var(--serif);font-size:19px;letter-spacing:.12em;color:#fff;font-weight:600;text-shadow:0 1px 4px rgba(0,0,0,.5)}
.logo .mark{color:var(--gold-soft,#d6c284);margin-right:6px}
/* タグライン: ロゴの下に、角丸の青グラデーション「ゲージ」＋白文字＋両脇に✦の飾り（ロゴ画像に合わせた意匠）。
   ヘッダー色を変えても映えるよう、ゲージ色は theme_tag_* で個別に調整可能（未設定時は明るい青）。 */
.tagline{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;margin-top:2px;width:200px;
  padding:1px 10px;border-radius:999px;max-width:100%;
  background:linear-gradient(180deg,var(--tag-from,#161087) 0%,var(--tag-to,#6B7FF877) 100%);
  color:#fff;font-size:10px;font-weight:700;letter-spacing:.04em;line-height:1.5;
  border:0px solid rgba(255,255,255,.45);
  text-shadow:0 1px 2px rgba(0,0,0,.3);}
.tagline::before,.tagline::after{content:"✦";color:#ffffff;font-size:7px;opacity:.95;flex:0 0 auto}
nav{display:flex;gap:2px;flex-wrap:wrap;margin-left:auto}
/* ヘッダーのナビは「残り幅ぶんだけ」使う（flex:1 1 0 + min-width:0）。
   こうすると横幅が足りないとき、ナビ全体が .hd の折り返しでロゴの下段へ丸ごと落ちるのではなく、
   ナビ項目（検索バー含む）だけがナビ内で2段に折り返す＝ロゴ側の縦は変わらず、縦の増加が最小で済む。
   ※ .mynav / .pager 等の他の nav に影響しないよう header 配下に限定 */
header nav{flex:1 1 0;min-width:0;justify-content:flex-end;align-items:center}

/* スマホ相当（〜640px）ではタグラインサイズを変える */
@media(max-width:640px){
  .tagline{ padding:1px 4px;font-size:6px;gap:3px;width:120px;}
}
/*display:none;*/

/* 狭幅（〜900px）: ナビを flex から「ロゴへの回り込み（float）」に切り替える。
   ロゴ横の残り幅にflexで押し込むと、幅が狭いほどナビが何行にも折り返して縦を食う。
   ロゴを float させ、ナビ項目をインラインで流すと、横に入り切らない項目は
   ロゴの“下”の空きスペースまで回り込むため、行数＝ヘッダーの縦幅を最小にできる。 */
@media(max-width:900px){
  .hd{display:block}
  .hd::after{content:"";display:block;clear:both} /* floatの解除 */
  .brand{float:left;margin-right:2px}
  header nav{display:block;flex:none;min-width:0;margin-left:0;text-align:right}
  /* 各ナビ項目をインラインで流す。.hd-search / .nav-account は自分のクラス側の
     display:inline-flex が（詳細度で）勝つので内部レイアウトは壊れない。 */
  header nav > *{display:inline-block;vertical-align:middle;margin:2px 1px}
}

nav a{color:#e3e5f6;font-size:13px;padding:4px 8px;border-radius:6px;letter-spacing:.04em}
nav a:hover{background:rgba(255,255,255,.12)}
nav a.cta{border:1px solid var(--gold-soft,#d6c284);color:#f2e8cd}
nav a.cta:hover{background:var(--gold-soft,#d6c284);color:var(--indigo-deep,#161936)}
/* アカウント（マイページ）ドロップダウン: ログイン中のみ site.js が hidden を外して開放する。
   ・未ログイン: [hidden] のまま → 完全非表示
   ・ログイン中: 既定は非表示（opacity:0/visibility:hidden）で、ホバー/フォーカス時だけ
     ふわっと降りてくる（離すと戻る）。display切替ではなくopacity/transformでアニメさせる。 */
.nav-account{position:relative;display:inline-flex}
.nav-account-menu{position:absolute;top:100%;right:0;min-width:150px;display:flex;flex-direction:column;gap:2px;
  background:var(--indigo-deep,#161936);border:1px solid var(--gold-soft,#d6c284);border-radius:8px;padding:4px;
  box-shadow:0 6px 20px rgba(0,0,0,.35);z-index:50;
  opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none;
  transition:opacity .16s ease, transform .16s ease, visibility .16s}
.nav-account-menu[hidden],.nav-account-menu [hidden]{display:none} /* メニュー本体と、作品0件などで隠す個別項目を完全非表示 */
.nav-account:hover .nav-account-menu:not([hidden]),
.nav-account:focus-within .nav-account-menu:not([hidden]){
  opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.nav-account-menu a{display:block;white-space:nowrap;font-size:13px;padding:8px 12px}
.nav-account-menu a:hover{background:rgba(255,255,255,.14)}

@media(max-width:640px){
	nav a{font-size:12px;padding:4px 6px;}
}
/* マイページ系4ページ共通の位置ナビ（タブ風）。現在地は選択済み＝押せない表示。 */
.mynav{display:flex;gap:8px;flex-wrap:wrap;max-width:820px;margin:16px auto 10px;padding:0 16px}
.mynav-item{display:inline-block;padding:9px 18px;border-radius:8px;font-size:14px;font-weight:700;
  text-decoration:none;border:1px solid var(--indigo,#22265f);background:#fff;color:var(--indigo,#22265f);
  transition:background .12s ease,color .12s ease}
.mynav-item:hover{background:var(--lav,#e9ebf8)}
.mynav-item.is-current{background:linear-gradient(180deg,var(--indigo-mid,#3a3f9e),var(--indigo,#22265f));
  color:#fff;border-color:var(--gold-soft,#d6c284);cursor:default;pointer-events:none;
  box-shadow:0 2px 6px rgba(34,38,95,.28)}

/* 更新サマリーバー */
.update-bar{background:var(--ivory,#fdfaee);border:1px solid var(--ivory-line,#d8c17e);border-radius:var(--radius);
  box-shadow:inset 0 0 0 1px #fff,0 1px 6px rgba(34,38,95,.07);
  margin:16px 0;padding:10px 16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.update-bar .bell{font-size:16px}
.update-bar b{color:var(--indigo,#22265f);font-size:13px;letter-spacing:.04em}
.chip{display:inline-block;background:#fff;border:1px solid var(--gold-soft,#d6c284);border-radius:999px;
  padding:2px 12px;font-size:12px;font-weight:700;color:var(--ink)}
.chip .n{color:var(--new,#b3123e)}
.chip:hover{background:var(--indigo,#22265f);color:#fff;border-color:var(--indigo,#22265f)}
.chip:hover .n{color:#f4c8d5}

/* セクション見出し */
section{margin:30px 0}
.sec-h{display:flex;align-items:baseline;gap:12px;border-bottom:1px solid var(--line,#d8dbf0);padding-bottom:8px;margin-bottom:14px;flex-wrap:wrap}
/* セクション見出し（人気上昇作品！等）: 明朝のまま、線を太らせて力強く（text-shadowで疑似ボールド。text-strokeは！等で枠が出るため不採用）。 */
.sec-h h2{font-family:var(--serif);font-size:19px;letter-spacing:.12em;color:var(--indigo,#22265f);font-weight:700;
  text-shadow:.5px 0 currentColor,-.5px 0 currentColor}
.sec-h h2 .dia{color:var(--gold,#af8f3e);font-size:12px;margin-right:8px;vertical-align:2px}
.sec-h .en{font-size:9px;letter-spacing:.32em;color:var(--peri,#9297d8)}
.delta{font-size:11px;font-weight:800;color:#fff;background:var(--new,#b3123e);border-radius:999px;padding:1px 9px}
.delta.calm{background:var(--peri,#9297d8)}
.sec-h .note{font-size:11px;color:var(--sub);margin-left:auto;letter-spacing:.03em}

/* 話題の新作: スクショ主体ショーケース */
.feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:760px){.feat-grid{grid-template-columns:repeat(2,1fr);gap:9px}}
.feat{position:relative;border-radius:10px;overflow:hidden;border:1px solid var(--line,#d8dbf0);
  aspect-ratio:16/11.5;display:block;color:#fff;transition:transform .12s,box-shadow .12s}
.feat:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(34,38,95,.25)}
.feat.fresh{outline:2px solid var(--ivory-line,#d8c17e)}
.feat .bgimg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:46px}
.feat .bgimg .ts-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease}
.feat .bgimg .ts-img.is-active{opacity:1}
.feat .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,14,42,0) 28%,rgba(12,14,42,.55) 55%,rgba(12,14,42,.92) 100%)}
.feat .info{position:absolute;left:0;right:0;bottom:0;padding:8px 11px 9px}
.feat .info h3{font-family:var(--serif);font-size:14px;letter-spacing:.03em;line-height:1.35;text-shadow:0 1px 3px rgba(0,0,0,.7)}
.feat .info .bl{font-size:10.5px;color:#dfe1f5;line-height:1.5;margin-top:2px}
.feat .info .st{font-size:10.5px;color:#ffd98c;font-weight:700;margin-top:3px;letter-spacing:.02em}
.f1{background:linear-gradient(135deg,#5d55b8,#a75f9e)} .f2{background:linear-gradient(135deg,#31709e,#3f9e85)}
.f3{background:linear-gradient(135deg,#a3492c,#bd8a2c)} .f4{background:linear-gradient(135deg,#3b6a4e,#8aa32e)}

/* 通常カード */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:14px}
.card{background:var(--panel,#fff);border:1px solid var(--line,#d8dbf0);border-radius:var(--radius);overflow:hidden;position:relative;
  transition:transform .12s,box-shadow .12s}
.card:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(34,38,95,.16)}
.card.fresh{background:var(--ivory,#fdfaee);border-color:var(--ivory-line,#d8c17e)}
.thumb{height:112px;display:flex;align-items:center;justify-content:center;font-size:34px;color:#fff}
.t1{background:linear-gradient(135deg,#5d55b8,#a75f9e)}
.t2{background:linear-gradient(135deg,#31709e,#3f9e85)} .t3{background:linear-gradient(135deg,#a3492c,#bd8a2c)}
.t4{background:linear-gradient(135deg,#3b4a7e,#775190)} .t5{background:linear-gradient(135deg,#2a7a58,#7fa32e)}
.t6{background:linear-gradient(135deg,#7e2c46,#b05f5f)}
/* 実スクショのサムネ（複数枚はtopshots.jsがフェードで順送り）。枠に合わせてcoverで表示。 */
/* z-index:0でサムネ独自のstacking contextを作り、カード全体リンク(card-link,z:1)より下に閉じ込める。 */
.thumb{position:relative;overflow:hidden;z-index:0}
.thumb .ts-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s ease;z-index:1}
.thumb .ts-img.is-active{opacity:1}
.thumb .thumb-emoji{position:relative;z-index:0}
/* スクショがある枠では絵文字（⚔等のプレースホルダ）を出さない。
   クロスフェード中は入れ替わる2枚が同時に半透明になるため、下地の絵文字が一瞬透けて見えてしまう。
   画像があるときは無地の下地だけにして、フェードを落ち着かせる。 */
.thumb:has(.ts-img) .thumb-emoji{display:none}
/* カード全体をクリック可能にする（ストレッチリンク）。内側のプレイボタン等はz-indexで上に出す。 */
a.card-link{position:absolute;inset:0;z-index:1;border-radius:inherit}
.pick{position:relative}
.card .body{padding:10px 12px}
.card h3{font-family:var(--serif);font-size:14.5px;color:var(--indigo,#22265f);line-height:1.45;letter-spacing:.04em}
.card .by{font-size:11px;color:var(--sub)}
.card .stats{font-size:11px;color:var(--sub);margin-top:6px}
.card .stats .hot{color:var(--up,#b06f14);font-weight:700}
.card .tag{font-size:10px;background:var(--lav,#e9ebf8);color:var(--indigo,#22265f);border-radius:4px;padding:1px 7px;margin-right:4px;display:inline-block;margin-top:4px}
.blurb{font-size:12px;color:#565a86;background:var(--lav,#e9ebf8);border-left:2px solid var(--gold-soft,#d6c284);
  border-radius:0 6px 6px 0;padding:5px 9px;margin-top:7px}
.blurb::before{content:"🗨 ";opacity:.6}

/* バッジ */
.badge{position:absolute;top:7px;left:7px;font-size:10px;font-weight:800;color:#fff;z-index:2;
  border-radius:4px;padding:2px 8px;letter-spacing:.08em;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.b-new{background:var(--new,#b3123e)}
.b-new::before{content:"●";margin-right:4px;animation:blink 1.2s infinite}
@keyframes blink{50%{opacity:.2}}
.b-up{background:var(--up,#b06f14)} .b-back{background:var(--ok,#25795a)}
.b-king{background:linear-gradient(135deg,#c9a94f,#a2802a);color:#fff}
time.today{color:var(--new,#b3123e);font-weight:700}

/* 今日の一本 */
.pick{display:flex;background:var(--panel,#fff);border:1px solid var(--line,#d8dbf0);border-radius:var(--radius);overflow:hidden;
  outline:1px solid var(--lav,#e9ebf8);outline-offset:-6px}
.pick .thumb{width:38%;min-height:150px;height:auto;font-size:48px}
.pick .body{padding:16px 20px;flex:1}
.pick h3{font-family:var(--serif);font-size:18px;color:var(--indigo,#22265f);letter-spacing:.06em}
.play-btn{display:inline-block;background:linear-gradient(180deg,var(--indigo-mid,#3a3f9e),var(--indigo,#22265f));color:#fff;
  font-weight:700;letter-spacing:.14em;border:1px solid var(--gold-soft,#d6c284);border-radius:8px;
  padding:9px 30px;margin-top:12px;font-size:14px;box-shadow:0 2px 8px rgba(34,38,95,.3);cursor:pointer}
.play-btn:hover{background:linear-gradient(180deg,#4a4fb4,#2b2f77)}
.play-btn-disabled{opacity:.6;cursor:not-allowed;background:var(--sub)}

/* 新着リスト */
.newlist{background:var(--panel,#fff);border:1px solid var(--line,#d8dbf0);border-radius:var(--radius);overflow:hidden}
.newlist li{list-style:none;display:flex;gap:10px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--lav,#e9ebf8);font-size:13px;flex-wrap:wrap}
.newlist li:last-child{border-bottom:none}
.newlist li.fresh{background:var(--ivory,#fdfaee)}
.newlist b{font-family:var(--serif);letter-spacing:.03em}
.newlist .tag{font-size:10px;background:var(--lav,#e9ebf8);color:var(--indigo,#22265f);border-radius:4px;padding:1px 7px}
.newlist time{margin-left:auto;font-size:11px;color:var(--sub)}
.mini-new{font-size:10px;font-weight:800;color:var(--new,#b3123e)}

/* 横スクロールカルーセル（定番プール §6.1a） */
.kcar{position:relative}
.krail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x proximity;
  padding:4px 2px 10px;scrollbar-width:thin}
.krail::-webkit-scrollbar{height:8px}
.krail::-webkit-scrollbar-thumb{background:#c7cbe6;border-radius:8px}
/* 幅は固定（flex-basis 200px）。従来 flex:0 0 auto ＝幅が中身依存だったため、
   一言紹介が長い作品でカードだけ極端に横長になっていた。固定幅にすることで
   .catch の2行クランプ（-webkit-line-clamp:2 → あふれ分は「…」）が正しく効く。 */
.krail .card{width:200px;min-width:200px;flex:0 0 200px;scroll-snap-align:start}
.knav{position:absolute;top:44px;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--gold-soft,#d6c284);background:rgba(22,25,54,.82);color:#fff;
  font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 8px rgba(34,38,95,.3);z-index:3}
.knav:hover{background:var(--indigo,#22265f)}
.knav.prev{left:-6px} .knav.next{right:-6px}
@media(max-width:640px){.knav{display:none}}
/* 人気上昇作品！の順位・謎ポイント表示（recent.jsが描画） */
.krail .card{position:relative}
.krank{position:absolute;top:6px;right:8px;z-index:2;font-size:12px;font-weight:800;
  color:var(--gold,#c9a94f);text-shadow:0 1px 2px rgba(0,0,0,.5);letter-spacing:.02em}
.kmeta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:4px 0 2px}
.kpts{display:inline-flex;align-items:center;gap:2px;font-size:12px;font-weight:800;
  color:var(--indigo,#22265f);background:linear-gradient(135deg,#eef0ff,#dfe3ff);
  border:1px solid #c7cbe6;border-radius:999px;padding:1px 8px}
.kboost{font-size:11px;font-weight:700;color:#8a5a00;background:#fff3d6;
  border:1px solid #e6c884;border-radius:999px;padding:1px 7px}
.kedge{font-size:11px;font-weight:700;color:#9a3b3b;background:#ffe9e9;
  border:1px solid #e6b0b0;border-radius:999px;padding:1px 7px}
.krail .card.precarious{opacity:.9}
.krail .card.precarious .thumb{filter:saturate(.85)}

/* タグ一覧 */
.tagcloud{background:var(--panel,#fff);border:1px solid var(--line,#d8dbf0);border-radius:var(--radius);padding:14px 18px;margin:30px 0}
.tagcloud .grp{margin:8px 0}
.tagcloud .lbl{font-family:var(--serif);font-size:12px;color:var(--indigo,#22265f);letter-spacing:.1em;margin-right:10px}
.tagcloud .lbl .dia{color:var(--gold,#af8f3e);font-size:10px;margin-right:6px}
.tagcloud a{display:inline-block;font-size:12px;color:var(--indigo,#22265f);background:var(--lav,#e9ebf8);
  border:1px solid var(--line,#d8dbf0);border-radius:999px;padding:3px 11px;margin:3px 4px 3px 0}
.tagcloud a:hover{background:var(--indigo,#22265f);color:#fff;border-color:var(--indigo,#22265f)}
.tagcloud a .c{color:var(--sub);font-size:10px;margin-left:5px}
.tagcloud a:hover .c{color:#c6c9ec}

/* 広告枠 */
.ad-slot{min-height:100px;background:repeating-linear-gradient(45deg,#eceef7,#eceef7 10px,#e4e7f3 10px,#e4e7f3 20px);
  border:1px dashed var(--peri,#9297d8);border-radius:8px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;color:#8f93bd;font-size:12px;margin:24px 0;gap:2px}
.ad-slot .lbl{font-size:10px;letter-spacing:.3em;border:1px solid var(--peri,#9297d8);border-radius:3px;padding:0 8px}

/* パンくず */
.crumb{font-size:12px;color:var(--sub);margin:16px 0}

/* タイトルブロック（作品ページ） */
.title-block{background:var(--panel,#fff);border:1px solid var(--line,#d8dbf0);border-radius:var(--radius);
  outline:1px solid var(--lav,#e9ebf8);outline-offset:-6px;padding:22px 26px;margin-bottom:18px}
.state{display:inline-block;font-size:11px;font-weight:800;color:#fff;background:var(--ok,#25795a);border-radius:4px;padding:2px 12px;vertical-align:4px;letter-spacing:.1em}
h1{font-family:var(--serif);font-size:27px;letter-spacing:.1em;color:var(--indigo,#22265f);display:inline;margin-right:12px;font-weight:600}
.game-title-icon{display:inline-block;width:1em;height:1em;object-fit:contain;margin-right:.28em;border-radius:.18em;vertical-align:-.12em;letter-spacing:0}
@media(max-width:640px){
  .title-block{padding:18px 16px}
  .title-block h1{font-size:clamp(18px,5.3vw,21px);line-height:1.45;letter-spacing:.05em;overflow-wrap:anywhere}
}
.title-block .by{font-size:13px;color:var(--sub);margin-top:8px}
.title-block .by a{text-decoration:underline}
.meta-row{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--sub);margin-top:10px}
.meta-row b{color:var(--ink)}
.tagbar{margin-top:10px}
.tag{font-size:11px;background:var(--lav,#e9ebf8);color:var(--indigo,#22265f);border-radius:4px;padding:2px 9px;margin-right:6px}

/* 更新通知帯 */
.update-notice{background:var(--ivory,#fdfaee);border:1px solid var(--ivory-line,#d8c17e);border-radius:8px;
  box-shadow:inset 0 0 0 1px #fff;
  padding:9px 15px;margin:14px 0 0;font-size:13px;display:flex;gap:9px;align-items:baseline;flex-wrap:wrap}
.update-notice .n{font-size:10px;font-weight:800;color:#fff;background:var(--new,#b3123e);border-radius:4px;padding:1px 8px;letter-spacing:.1em;animation:blink 1.2s infinite}
.update-notice time{color:var(--new,#b3123e);font-weight:700;font-size:12px}

/* プレイエリア */
.play-area{text-align:center;margin:22px 0}
.play-note{font-size:11px;color:var(--sub);margin-top:8px;letter-spacing:.03em}
@media(max-width:640px){
  .play-area .play-btn{box-sizing:border-box;max-width:100%;padding-left:14px;padding-right:14px;
    font-size:clamp(10.5px,3.3vw,12.5px);letter-spacing:.06em;white-space:nowrap}
}
.offline-save-link{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:12px;padding:8px 17px;
  border:1px solid var(--gold-soft,#d6c284);border-radius:9px;background:linear-gradient(180deg,var(--ivory,#fdfaee),var(--lav,#e9ebf8));
  color:var(--indigo,#22265f);font-size:12.5px;font-weight:700;text-decoration:none;box-shadow:0 2px 7px rgba(34,38,95,.12);
  transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease,background .12s ease}
.offline-save-badge{display:inline-block;padding:2px 7px;border-radius:10px;background:var(--indigo,#22265f);color:#fff;font-size:9.5px;font-weight:700;line-height:1.2;letter-spacing:.03em;white-space:nowrap}
.offline-save-link:hover{transform:translateY(-1px);border-color:#b89b45;background:linear-gradient(180deg,#fffdf5,#e3e6f8);box-shadow:0 4px 11px rgba(34,38,95,.18)}
.offline-save-link[aria-disabled="true"]{opacity:.48;cursor:not-allowed;pointer-events:none;box-shadow:none;filter:saturate(.65)}
.offline-save-note{margin-top:5px;color:var(--sub);font-size:10.5px}
.save-note{margin:10px auto 0;max-width:560px;font-size:11.5px;line-height:1.7;color:#565a86;background:var(--ivory,#fdfaee);
  border:1px solid var(--ivory-line,#d8c17e);border-radius:8px;padding:8px 12px;text-align:left}

/* スクショ */
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0}
.shot{aspect-ratio:4/3;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:36px;color:#fff;border:1px solid var(--line,#d8dbf0)}
/* 4:3も16:9も切り取らず枠内に収める（contain）。余白は藍色でレターボックス表示。クリックで拡大。 */
.shot-img{width:100%;aspect-ratio:4/3;object-fit:contain;background:var(--indigo-deep,#161936);border-radius:8px;border:1px solid var(--line,#d8dbf0);cursor:zoom-in;display:block}
/* ヒーロー行（作品ページ上部: ギャラリー | 基本情報）ウディコン型レイアウト。title-block内に置かれる */
.hero-row{display:flex;gap:18px;margin:12px 0 0;align-items:flex-start}

/* ワンタップリアクション（面白い！等）。コメント入力前の軽い感想導線として左から読ませる */
.react-zone{margin:2px 0 18px;padding:12px 14px;background:var(--ivory,#fdfaee);border:1px solid var(--ivory-line,#d8c17e);border-radius:8px}
.react-prompt{color:var(--indigo,#22265f);font-size:13px;font-weight:700}
.react-prompt span{margin-left:6px;color:var(--sub,#7d81ab);font-size:10.5px;font-weight:400}
.react-bar{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;justify-content:flex-start}
.react-btn{display:inline-flex;align-items:center;gap:6px;border-radius:16px;padding:2px 8px;font-size:13px;
  cursor:pointer;color:var(--indigo,#22265f);border:1px solid var(--line,#d8dbf0);background:#fff;
  transition:transform .1s,box-shadow .1s,border-color .1s}
.react-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 3px 10px rgba(34,38,95,.14)}
.react-btn:disabled{cursor:default;opacity:.9}
.react-btn .react-count{font-size:11.5px;color:var(--sub,#7d81ab);font-weight:700;background:rgba(255,255,255,.7);border-radius:9px;padding:1px 7px}
/* 種別カラー（淡色地＋同系ボーダー。押下済みは濃くして太字） */
.react-btn[data-kind=fun]{background:#fff7e8;border-color:#e5c887}
.react-btn[data-kind=fresh]{background:#eefaf6;border-color:#8fd0bc}
.react-btn[data-kind=love]{background:#fdeef3;border-color:#eaa4bc}
.react-btn[data-kind=wow]{background:#eef1fd;border-color:#a3aee6}
.react-btn[data-kind=omg]{background:#f6eefd;border-color:#c7a3e6}
.react-btn.is-pressed{font-weight:700;box-shadow:inset 0 1px 4px rgba(34,38,95,.12);opacity:0.7;}
.react-btn.is-pressed[data-kind=fun]{background:#685222;border-color:#977925;color:#ffffff;}
.react-btn.is-pressed[data-kind=fresh]{background:#133b2d;border-color:#25795a;color:#ffffff;}
.react-btn.is-pressed[data-kind=love]{background:#2e0c17;border-color:#b3123e;color:#ffffff;}
.react-btn.is-pressed[data-kind=wow]{background:#0e1530;border-color:#3a3f9e;color:#ffffff;}
.react-btn.is-pressed[data-kind=omg]{background:#240d36;border-color:#7a3f9e;color:#ffffff;}
.react-btn.is-pressed .react-count{color:var(--indigo,#22265f)}

/* カード上のフォローボタン（一覧・検索・殿堂）。card-link(z:1)より上に出す。
   .author-follow は作品ページの「作者をフォロー」用（見た目は同じだがJSの委譲対象を分けるため別クラス） */
.card-follow,.author-follow{position:relative;z-index:2;margin-left:8px;background:#fff;color:var(--indigo,#22265f);
  border:1px solid var(--line,#d8dbf0);border-radius:10px;padding:1px 9px;font-size:10.5px;font-weight:700;cursor:pointer}
.card-follow:hover,.author-follow:hover{border-color:var(--indigo-mid,#3a3f9e)}
.card-follow.is-on,.author-follow.is-on{background:var(--indigo,#22265f);color:#f2e8cd;border-color:var(--gold-soft,#d6c284)}

/* 作品フォローボタン（配信中バッジの右） */
.follow-btn{display:inline-block;margin-left:10px;background:#fff;color:var(--indigo,#22265f);
  border:1px solid var(--indigo,#22265f);border-radius:14px;padding:3px 14px;font-size:12px;font-weight:700;
  cursor:pointer;vertical-align:4px;transition:transform .1s,background .12s}
.follow-btn:hover:not(:disabled){transform:translateY(-1px)}
.follow-btn.is-on{background:var(--indigo,#22265f);color:#f2e8cd;border-color:var(--gold-soft,#d6c284)}

/* 作品ページの宣伝ボタン（応援チケット）。プレイ導線より目立ちすぎないよう中央に落ち着かせる */
.promote-row{width:100%;max-width:560px;margin:14px auto 0;text-align:center;font-size:11px}
.promote-btn{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(180deg,#fdf6e3,#f7ead0);
  color:#7a5b12;border:1px solid var(--gold-soft,#d6c284);border-radius:13px;padding:3px 11px;font-size:11.5px;
  font-weight:700;cursor:pointer;transition:transform .1s,box-shadow .1s}
.promote-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 3px 10px rgba(176,111,20,.2)}
.promote-btn:disabled{opacity:.55;cursor:default}
.promote-note{display:block;margin-top:2px;color:var(--sub,#7d81ab);font-size:10.5px}
.promote-history{margin-top:2px;color:var(--sub,#7d81ab);font-size:10.5px}
.gcar{flex:0 0 46%;max-width:520px;position:relative}
.gcar-frame{position:relative;width:100%;aspect-ratio:4/3;border-radius:10px;overflow:hidden;
  background:var(--indigo-deep,#161936);border:1px solid var(--line,#d8dbf0)}
/* スクショ切替はフェード（重ね＋opacity）。gallery.js が2秒ごとに is-active を付け替える。
   非アクティブ画像は pointer-events:none にして、見えている1枚だけがクリック対象になるようにする
   （これをしないと、重なった最前面の別画像がクリックを受けて「違う画像が拡大される」不具合になる）。 */
.gcar-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;
  transition:opacity .5s ease;cursor:zoom-in;pointer-events:none}
.gcar-img.is-active{opacity:1;pointer-events:auto}
.gcar-empty{display:flex;align-items:center;justify-content:center;font-size:52px;color:#fff}
.gcar-dots{display:flex;justify-content:center;gap:10px;margin-top:8px}
.gcar-dot{width:11px;height:11px;border-radius:50%;border:1px solid var(--indigo,#22265f);background:#fff;cursor:pointer;padding:0}
.gcar-dot.is-active{background:var(--indigo,#22265f)}
.hero-info{flex:1;min-width:0}
.hero-meta{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;margin:0;font-size:13.5px}
.hero-meta dt{color:var(--sub,#7d81ab);white-space:nowrap}
.hero-meta dd{margin:0;font-weight:700;color:var(--ink,#2d2f4e)}
.hero-meta .author-url-wrap{font-size:11px;font-weight:400;color:var(--sub,#7d81ab);white-space:nowrap}
.hero-meta .author-url-link{color:var(--ok,#25795a);text-decoration:underline;text-underline-offset:2px}
.hero-facts-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hero-meta .hero-facts{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px;margin-top:3px;font-weight:700}
.hero-fact{display:inline-flex;align-items:center;min-height:24px;padding:3px 10px;border:1px solid #d8dbf0;border-radius:999px;
  background:#f6f6fb;color:var(--indigo,#22265f);font-size:12px;line-height:1.2;white-space:nowrap}
.hero-fact-genre{max-width:100%;box-sizing:border-box;background:#f6f6fb;border-color:#d8dbf0;white-space:normal;overflow-wrap:anywhere}
/* 所要時間・容量の負荷感を、一般的な緑→黄→橙→赤のゲージで直感的に伝える。 */
.hero-fact[class*="hero-fact-tone-"]{box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 1px 2px rgba(45,47,78,.08)}
.hero-fact-tone-1{background:#e7f4eb;background:linear-gradient(180deg,#f4fbf6,#d8eddf);border-color:#9ac7aa;color:#215c38}
.hero-fact-tone-2{background:#eef3c8;background:linear-gradient(180deg,#f7f9dd,#e2ecad);border-color:#becb72;color:#465c12}
.hero-fact-tone-3{background:#ffe9a8;background:linear-gradient(180deg,#fff5cf,#ffdc7a);border-color:#e0bc50;color:#654d00}
.hero-fact-tone-4{background:#f6bf78;background:linear-gradient(180deg,#ffdab0,#efa45c);border-color:#dc8e42;color:#713900}
.hero-fact-tone-5{background:#c94b48;background:linear-gradient(180deg,#c94b48,#a83230);border-color:#96302e;color:#fff}
@media(max-width:700px){.hero-row{flex-direction:column}.gcar{flex:none;max-width:none;width:100%}}
/* 作品上部の感想プレビュー。短文だけを静かに見せ、クリック領域全体でコメントへ移動できる */
.latest-impressions{display:grid;grid-template-columns:auto 1fr auto;gap:10px 14px;align-items:start;margin:14px -18px -14px;padding:11px 18px 12px;
  border-top:1px solid var(--line,#d8dbf0);border-radius:0 0 var(--radius) var(--radius);background:linear-gradient(90deg,var(--ivory,#fdfaee),#fff);
  color:var(--ink,#2d2f4e);text-decoration:none}
.latest-impressions:hover{background:linear-gradient(90deg,#fff4d7,#fff);text-decoration:none}
.latest-impressions-title{font-size:11px;font-weight:800;color:var(--indigo,#22265f);white-space:nowrap}
.latest-impressions-list{display:grid;gap:3px;min-width:0}
.latest-impression{display:flex;gap:7px;min-width:0;font-size:11.5px;line-height:1.45;color:var(--sub,#7d81ab)}
.latest-impression>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.latest-impression-who{flex:none;max-width:8em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;color:var(--indigo-mid,#3a3f9e)}
.latest-impressions-more{font-size:10.5px;font-weight:700;color:var(--indigo-mid,#3a3f9e);white-space:nowrap}
@media(max-width:640px){
  .latest-impressions{grid-template-columns:1fr auto;margin-left:-8px;margin-right:-8px}
  .latest-impressions-list{grid-column:1/-1;grid-row:2}
  .latest-impressions-title{grid-column:1}
  .latest-impressions-more{grid-column:2}
}

/* 拡大オーバーレイ（lightbox.jsで開閉） */
.lb-overlay{position:fixed;inset:0;background:rgba(13,15,40,.88);display:none;align-items:center;justify-content:center;z-index:1000;cursor:zoom-out;padding:24px}
.lb-overlay.is-open{display:flex}
.lb-overlay img{max-width:96vw;max-height:92vh;object-fit:contain;border-radius:6px;box-shadow:0 8px 40px rgba(0,0,0,.5)}
.lb-close{position:fixed;top:14px;right:20px;color:#fff;font-size:30px;line-height:1;background:none;border:none;cursor:pointer}
.s1{background:linear-gradient(135deg,#5d55b8,#a75f9e)} .s2{background:linear-gradient(160deg,#3b4076,#161936)} .s3{background:linear-gradient(120deg,#a3572f,#7e3f5e)}

/* パネル（作品紹介・プレイ状況・コメント等） */
.panel{background:var(--panel,#fff);border:1px solid var(--line,#d8dbf0);border-radius:var(--radius);padding:18px 24px;margin:18px 0}
.panel h2{font-family:var(--serif);font-size:16px;letter-spacing:.12em;color:var(--indigo,#22265f);font-weight:700;
  text-shadow:.5px 0 currentColor,-.5px 0 currentColor;
  border-bottom:1px solid var(--line,#d8dbf0);padding-bottom:7px;margin-bottom:12px}
.panel h2 .dia{color:var(--gold,#af8f3e);font-size:11px;margin-right:8px;vertical-align:2px}
/* 作品説明文（.desc）の組版。md_to_safe_html の出力（投稿/編集画面のプレビューも同クラスを流用） */
.desc{font-size:14px}
.desc p{margin-bottom:.8em}
.game-engine-info{margin-top:14px;padding-top:9px;border-top:1px solid var(--line,#d8dbf0);color:var(--sub,#7d81ab);font-size:11.5px;overflow-wrap:anywhere}
.game-engine-info>span{margin-right:7px;font-weight:700;color:var(--indigo-mid,#3a3f9e)}
.game-engine-info .engine-note{font-size:10.5px;margin-left:4px}
/* 見出し階層（Markdown: 「#」→h3、「##」→h4、「###」以深→h5。h3>h4>h5 が視覚的に分かるように） */
.desc h3{font-family:var(--serif);font-size:17px;letter-spacing:.06em;font-weight:700;color:var(--indigo,#22265f);
  margin:1.6em 0 .55em;padding-bottom:.3em;border-bottom:1px solid var(--line,#d8dbf0)}
.desc h4{font-size:15px;font-weight:700;color:var(--indigo,#22265f);
  margin:1.3em 0 .45em;padding-left:.55em;border-left:3px solid var(--peri,#9297d8)}
.desc h5{font-size:14px;font-weight:700;color:var(--indigo-mid,#3a3f9e);margin:1.1em 0 .35em}
.desc h3:first-child,.desc h4:first-child,.desc h5:first-child{margin-top:.2em}
/* リスト: 全体リセット（*{padding:0}）で消える字下げを戻し、下マージンで次のブロックとの間隔を確保 */
.desc ul,.desc ol{padding-left:1.4em;margin:.3em 0 1.2em}
.desc li{margin:.2em 0}
.desc blockquote{margin:.3em 0 1.2em;padding:.15em 0 .15em .9em;border-left:3px solid var(--peri,#9297d8);color:var(--sub,#7d81ab)}
.desc pre{margin:.3em 0 1.2em;padding:.7em .9em;background:var(--lav,#e9ebf8);border-radius:6px;overflow-x:auto;font-size:12.5px}
.desc code{font-family:Consolas,"Courier New",monospace}
.stats-line{display:flex;gap:22px;font-size:13px;flex-wrap:wrap}
.stats-line .hot{color:var(--up,#b06f14);font-weight:700}

/* コメント */
.cmt{border-bottom:1px solid var(--lav,#e9ebf8);padding:11px 4px;font-size:13px}
.cmt[hidden]{display:none}
.cmt:last-of-type{border-bottom:none}
.cmt .who{font-weight:700;color:var(--indigo,#22265f);font-size:12px}
.cmt .lv{font-size:10px;color:#fff;background:var(--peri,#9297d8);border-radius:3px;padding:0 6px;margin-left:5px}
.cmt time{font-size:11px;color:var(--sub);margin-left:9px}
.cmt time.today{color:var(--new,#b3123e);font-weight:700}
.cmt .likes{font-size:11px;color:var(--sub);margin-left:10px;cursor:pointer;border-radius:10px;padding:2px 8px;border:1px solid transparent;transition:background .12s,border-color .12s}
.cmt .likes:hover{background:var(--lav,#e9ebf8)}
/* 押下済み（自分がいいねしたコメント）: 色付きピルで一目で分かる */
.cmt .likes.liked{background:var(--lav,#e9ebf8);border-color:var(--indigo-mid,#3a3f9e);color:var(--indigo,#22265f);font-weight:700}
.cmt.fresh{background:var(--ivory,#fdfaee);border-left:3px solid var(--gold-soft,#d6c284);padding-left:12px}
.mini-new{font-size:10px;font-weight:800;color:var(--new,#b3123e);margin-right:4px}
.soft{cursor:help;font-size:12px}
.soft-note{font-size:10px;color:var(--sub)}
.cmt-delta{font-size:11px;color:var(--new,#b3123e);font-weight:800}
.comment-kind{display:inline-flex;align-items:center;gap:4px;border:1px solid currentColor;border-radius:999px;padding:1px 8px;font-size:10.5px;font-weight:800;line-height:1.55;vertical-align:1px;margin-left:6px}
.comment-kind.kind-impression{color:var(--ok,#25795a);background:#eef9f4}
.comment-kind.kind-bug{color:var(--new,#b3123e);background:#fff0f2}
.cmt-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:9px 0 13px}
.cmt-tab{border:1px solid var(--line,#d8dbf0);border-radius:999px;background:#fff;color:var(--sub,#7d81ab);padding:4px 14px;font-size:11.5px;font-weight:700;cursor:pointer}
.cmt-tab:hover{border-color:var(--peri,#9297d8);color:var(--indigo,#22265f)}
.cmt-tab.is-active{border-color:var(--indigo,#22265f);background:var(--indigo,#22265f);color:#fff}
.spoiler{background:#333;color:#333;border-radius:3px;cursor:pointer;padding:0 2px}
.spoiler.revealed{background:var(--lav,#e9ebf8);color:var(--ink)}
.cmt-form{margin-top:16px}
.cmt-kind-picker{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:7px}
.cmt-kind-picker .comment-kind{margin:0;padding:3px 10px;cursor:pointer}
.cmt-kind-picker input{accent-color:currentColor}
.cmt-kind-fixed{font-size:11px;color:var(--sub,#7d81ab);margin-bottom:7px}.cmt-kind-fixed .comment-kind{margin:0 5px 0 0}
.cmt-form textarea{width:100%;border:1px solid var(--line,#d8dbf0);border-radius:8px;padding:11px;font-size:13px;min-height:72px;font-family:inherit;background:#fdfdff}
.cmt-form textarea:focus{outline:2px solid var(--peri,#9297d8)}
.cmt-form button{background:linear-gradient(180deg,var(--indigo-mid,#3a3f9e),var(--indigo,#22265f));color:#fff;border:1px solid var(--gold-soft,#d6c284);
  border-radius:8px;padding:8px 28px;font-size:13px;font-weight:700;letter-spacing:.1em;margin-top:9px;cursor:pointer}
.cmt-form .hint{font-size:11px;color:var(--sub);margin-top:5px}

.footlinks{font-size:12px;text-align:right;margin:12px 0}
.footlinks a{color:var(--sub);text-decoration:underline;margin-left:16px}

/* フッター */
footer{background:var(--indigo-deep,#161936);border-top:1px solid var(--gold-soft,#d6c284);color:#b9bde4;font-size:12px;margin-top:44px;padding:24px 0;text-align:center}
footer .fname{font-family:var(--serif);letter-spacing:.26em;color:#e3e5f6;margin-bottom:8px;font-size:13px}
footer a{color:#dfe1f5;margin:0 10px}

/* 絞り込みUI（一覧・タグ/時間/年ページ・検索） */
.filter-controls{background:var(--panel,#fff);border:1px solid var(--line,#d8dbf0);border-radius:var(--radius);padding:14px 18px}
.filter-row{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:6px 0}
.filter-lbl{font-size:12px;color:var(--sub);margin-right:6px}
.filter-btn{font-size:12px;background:var(--lav,#e9ebf8);color:var(--indigo,#22265f);border:1px solid var(--line,#d8dbf0);
  border-radius:999px;padding:4px 12px;cursor:pointer}
.filter-btn .c{color:var(--sub);font-size:10px;margin-left:4px}
.filter-btn.is-active{background:var(--indigo,#22265f);color:#fff;border-color:var(--indigo,#22265f)}
.filter-btn.is-active .c{color:#c6c9ec}
#sortSelect{font-size:12px;padding:4px 8px;border:1px solid var(--line,#d8dbf0);border-radius:6px;background:#fff;color:var(--ink)}
.empty-note{color:var(--sub);font-size:13px;padding:24px 0;text-align:center}

/* 検索 */
.search-form{margin:10px 0}
#searchInput{width:100%;max-width:480px;padding:10px 14px;font-size:14px;border:1px solid var(--line,#d8dbf0);border-radius:999px}
#searchInput:focus{outline:2px solid var(--peri,#9297d8)}
.search-hint{color:var(--sub);font-size:12px;margin-top:8px}

/* 記録庫 */
.archive-lead{font-size:13px;color:var(--sub);margin-top:8px}
.archive-year{margin:24px 0}
.archive-list{list-style:none}
.archive-item{display:flex;gap:12px;align-items:center;padding:10px 6px;border-bottom:1px solid var(--lav,#e9ebf8)}
.thumb-mini{width:44px;height:44px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:20px;color:#fff;flex:0 0 auto}
.archive-body b{font-family:var(--serif)}
.archive-body .by{font-size:12px;color:var(--sub);margin-left:8px}
.archive-body .archived-at{font-size:11px;color:var(--sub);margin-left:8px}
.archive-note{font-size:12px;color:#565a86;margin-top:4px}

.mock-note{position:fixed;bottom:8px;right:8px;background:#333;color:#fff;font-size:10px;padding:4px 10px;border-radius:6px;opacity:.75}

/* ランキング（/ranking/）。順位番号つきの縦リスト。1〜3位は金・銀・銅で色分け（藍の港トーンに馴染ませる）。 */
.ranking-recent-toggle{font-size:12px;color:var(--ink);display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.ranking-recent-toggle input{accent-color:var(--indigo,#22265f)}
.ranking-cards{list-style:none;margin:14px 0 0;padding:0;counter-reset:none}
.rank-card{position:relative;display:flex;gap:12px;align-items:center;
  background:var(--panel,#fff);border:1px solid var(--line,#d8dbf0);border-radius:var(--radius);
  padding:10px 14px 10px 46px;margin-bottom:10px}
.rank-num{position:absolute;left:0;top:0;width:38px;height:100%;display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:16px;font-weight:700;color:var(--sub);letter-spacing:.02em}
.rank-link{position:absolute;inset:0;z-index:1}
.rank-thumb{width:64px;height:48px;border-radius:8px;flex:0 0 auto;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:22px}
.rank-body{min-width:0;flex:1 1 auto}
.rank-body h3{font-family:var(--serif);font-size:14.5px;color:var(--indigo,#22265f);line-height:1.45;letter-spacing:.04em}
.rank-body .by{font-size:12px;color:var(--sub);margin-top:2px}
.rank-metrics{margin-top:4px;font-size:12px;color:#565a86}
.rank-metric{margin-right:10px}
.rank-metric b{color:var(--indigo,#22265f);font-size:13px}
/* 1〜3位の色分け。左の順位番号を強調し、カード左端に金銀銅のアクセント帯を出す。 */
.rank-card.rank-1{border-color:var(--gold,#af8f3e);box-shadow:inset 4px 0 0 var(--gold,#af8f3e)}
.rank-card.rank-1 .rank-num{color:var(--gold,#af8f3e);font-size:19px}
.rank-card.rank-2{border-color:#9aa2b4;box-shadow:inset 4px 0 0 #9aa2b4}
.rank-card.rank-2 .rank-num{color:#8a92a6;font-size:18px}
.rank-card.rank-3{border-color:#c08a5b;box-shadow:inset 4px 0 0 #c08a5b}
.rank-card.rank-3 .rank-num{color:#b07a48;font-size:17px}

/* ─── ヘッダー内の常設検索バー（検索ページを作品一覧へ統合したため） ───
   ナビ項目群の一員として「作品一覧」の右に置く。
   ヘッダーの縦幅を増やさないよう、ナビと同じ行に収まる高さ(28px)に抑える。 */
.hd-search{display:inline-flex;align-items:center;gap:0;margin:0 4px;height:28px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);border-radius:999px;
  overflow:hidden;transition:background .12s,border-color .12s}
.hd-search:focus-within{background:rgba(255,255,255,.22);border-color:var(--gold-soft,#d6c284)}
.hd-search input[type=search]{width:130px;height:100%;padding:0 10px;border:0;outline:0;background:transparent;
  color:#fff;font-size:12px;font-family:inherit}
.hd-search input[type=search]::placeholder{color:rgba(255,255,255,.7)}
.hd-search input[type=search]::-webkit-search-cancel-button{filter:invert(1) opacity(.6)}
.hd-search button{height:100%;padding:0 10px;border:0;background:transparent;color:#fff;font-size:12px;
  cursor:pointer;line-height:1}
.hd-search button:hover{background:var(--gold-soft,#d6c284)}
@media(max-width:640px){
  .hd-search{margin:0}
  .hd-search input[type=search]{width:70px}
}

/* ─── 作品一覧ページの検索ボックス ─── */
.list-search{display:inline-flex;align-items:center;background:#fff;border:1px solid var(--line,#d8dbf0);
  border-radius:999px;overflow:hidden;height:32px}
.list-search:focus-within{border-color:var(--indigo-mid,#3a3f9e)}
.list-search input[type=search]{width:240px;max-width:52vw;height:100%;padding:0 12px;border:0;outline:0;
  font-size:13px;font-family:inherit;color:var(--ink,#2d2f4e);background:transparent}
.list-search input[type=search]::-webkit-search-cancel-button{display:none}
.list-search-clear{height:100%;padding:0 10px;border:0;background:transparent;color:var(--sub,#7d81ab);
  font-size:15px;cursor:pointer;line-height:1}
.list-search-clear:hover{color:var(--new,#b3123e)}
.list-search-count{font-size:12px;color:var(--sub,#7d81ab);margin-left:4px}

/* ─── カード本文の縦幅圧縮（作品一覧・ランキング共通） ───
   旧: 作品名 / by作者 / タグ / 累計X回 の4行 → 新: [作品名+by作者] / [タグ+数値+フォロー] の2行。
   一言紹介(.catch)は作者が入力したときだけ1行ぶん増える。 */
.card .head-row,.rank-card .head-row{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.card .head-row h3,.rank-card .head-row h3{flex:1 1 auto;min-width:0}
.card .head-row .by,.rank-card .head-row .by{flex:0 0 auto;font-size:11px;color:var(--sub)}
.card .meta-row,.rank-card .rank-metrics{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:5px}
.card .meta-row .tag,.rank-card .rank-metrics .tag{margin-top:0;margin-right:0}
.card .meta-row .stats{margin-top:0}
.card .meta-row .card-follow{margin-left:auto}
/* 一言紹介: 作者が書く短い1行紹介。長すぎる場合のみ2行で省略する。 */
.card .catch,.rank-card .catch{font-size:11.5px;color:#565a86;line-height:1.45;margin-top:3px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  /* 区切りの無い長い文字列（英数字の羅列・URL等）でも枠内で折り返させる。
     日本語は既定で任意位置改行できるが、Latin文字の連続は枠を押し広げるため */
  overflow-wrap:anywhere}
.card h3,.rank-card h3,.feat .info .bl{overflow-wrap:anywhere}
/* 作品ページ: 作者欄の上に置く一言紹介 */
.catchphrase{font-size:13.5px;color:var(--indigo,#22265f);font-weight:700;line-height:1.5;
  margin:0 0 8px;padding-left:9px;border-left:3px solid var(--gold-soft,#d6c284)}

/* ─── スマホの作品一覧: 1列だとサムネが横長に潰れるので2列にする ─── */
@media(max-width:640px){
  .cards{grid-template-columns:repeat(2,1fr);gap:10px}
  .card .body{padding:8px 9px}
  .card h3{font-size:13px}
  .card .head-row{gap:4px}
  .card .head-row .by,.card .meta-row .stats{font-size:10px}
  .card .catch{font-size:10.5px}
}

/* ─── ランキング: サムネを大きめに（情報量より視認性を優先） ───
   横幅は固定（行の高さを揃えるため）。縦は 4:3 まで許容する:
   ウディタの初期画面が 640x480（4:3）で、設定変更した作品は 16:9 等になるため、
   いちばん縦長になる 4:3 に合わせておけばどちらの作品も破綻しない。 */
.rank-card .rank-thumb{width:96px;aspect-ratio:4/3;height:auto}
@media(max-width:640px){.rank-card .rank-thumb{width:76px}}

/* ─── トップの入場アニメ: 各カードが右から素早く滑り込む（1枚ずつ慣性を少し変えてズサーッと） ───
   対象: 話題の新作(.feat) と 人気上昇レール(.krail .card)。
   fill-mode:backwards で「順番が来るまで隠す→滑り込む→通常」に。終了後はホバー等の変形が効く。 */
@keyframes slideInFromRight{from{opacity:0;transform:translateX(72px)}to{opacity:1;transform:translateX(0)}}
.feat-grid .feat,.krail .card{animation:slideInFromRight .55s cubic-bezier(.16,1,.3,1) backwards}
/* 1枚ずつ、開始タイミングとイージング（慣性）を少しずつ変える */
.feat-grid .feat:nth-child(1),.krail .card:nth-child(1){animation-delay:.03s;animation-timing-function:cubic-bezier(.16,1,.3,1)}
.feat-grid .feat:nth-child(2),.krail .card:nth-child(2){animation-delay:.09s;animation-timing-function:cubic-bezier(.22,1.1,.3,1)}
.feat-grid .feat:nth-child(3),.krail .card:nth-child(3){animation-delay:.15s;animation-timing-function:cubic-bezier(.12,.9,.28,1)}
.feat-grid .feat:nth-child(4),.krail .card:nth-child(4){animation-delay:.21s;animation-timing-function:cubic-bezier(.2,1.15,.32,1)}
.feat-grid .feat:nth-child(5),.krail .card:nth-child(5){animation-delay:.27s;animation-timing-function:cubic-bezier(.16,1,.3,1)}
.krail .card:nth-child(6){animation-delay:.33s;animation-timing-function:cubic-bezier(.22,1.1,.3,1)}
.krail .card:nth-child(7){animation-delay:.39s;animation-timing-function:cubic-bezier(.12,.9,.28,1)}
.krail .card:nth-child(8){animation-delay:.45s;animation-timing-function:cubic-bezier(.2,1.15,.32,1)}
.krail .card:nth-child(n+9){animation-delay:.5s}

/* ─── サーバー運営負担ゲージ（トップ最下部・generate.phpが毎晩焼き込む静的表示） ───
   前%:R2使用量 後%:当月AI利用料。100%基準は管理画面(ops_r2_full_gb/ops_llm_full_yen)で変更可。
   金額・生値は出さない方針（%のみ）。合計>100%は赤満タンの上に紫を mod 100 の幅で重ねて表現。 */
.ops-load{margin:28px auto 4px;text-align:center;color:var(--sub,#8c90c0);font-size:11px;letter-spacing:.05em}
.ops-load-t{margin-bottom:5px;opacity:.85}
.ops-load-bar{position:relative;width:260px;max-width:100%;height:8px;margin:0 auto;background:#111;border:1px solid #2a2d4a;border-radius:4px;overflow:hidden}
.ops-load-red{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#7a1020,#e0304a)}
.ops-load-purple{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#4a2b8a,#7a4fd0)}
@media(max-width:640px){.ops-load-bar{width:100%}}

/* ─── 自作品一覧（my/works.php）: 冬眠ゲージ（[G] 2026-07-26 末尾追記。既存行は変更しない約束） ─── */
.wk-gauge{margin:6px 0 8px;max-width:340px}
.wk-gauge .wk-gauge-labels{display:flex;justify-content:space-between;font-size:10.5px;color:var(--sub,#7d81ab);letter-spacing:.04em;margin-bottom:2px}
.wk-gauge .wk-gauge-bar{height:9px;background:var(--lav,#e9ebf8);border:1px solid var(--line,#d8dbf0);border-radius:5px;overflow:hidden}
.wk-gauge .wk-gauge-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--indigo-mid,#3a3f9e),var(--indigo,#22265f))}
.wk-gauge.warn .wk-gauge-fill{background:linear-gradient(90deg,#e7912f,#c9741a)}
.wk-gauge .wk-gauge-note{font-size:11px;color:var(--sub,#7d81ab);margin-top:2px}
.wk-gauge.warn .wk-gauge-note{color:var(--up,#b06f14);font-weight:700}

/* ─── 作品ページ上部広告枠（game_top）[E] 2026-07-26 末尾追記。既存行は変更しない方針 ─── */
/* タイトル白枠とブラウザプレイ白枠の間に置くバナー枠。プレイ導線上のためモバイルの圧迫感に配慮し、
   既存 .ad-slot（min-height:100px / margin:24px）より高さ・余白を控えめにする */
.ad-slot[data-ad-slot="game_top"]{min-height:64px;margin:16px 0}

/* 投稿・編集画面のオフライン保存例。説明文を読める幅を保ち、狭い画面では画像を下段へ逃がす。 */
.offline-permission-layout{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:start}
.offline-permission-example{display:block;border-radius:8px}
@media(max-width:520px){
  .offline-permission-layout{grid-template-columns:minmax(0,1fr)}
  .offline-permission-example{justify-self:end;margin-top:10px}
}

/* ─── 冬眠ゲージ %表記・見出し行の自動更新表記（[G] 2026-07-26 末尾追記。既存 .wk-gauge 行は不変更） ─── */
.wk-gauge .wk-gauge-row{display:flex;align-items:center;gap:7px}
.wk-gauge .wk-gauge-row .wk-gauge-bar{flex:1 1 auto}
.wk-gauge .wk-gauge-pct{font-size:11px;font-weight:700;color:var(--indigo,#22265f);min-width:36px;text-align:right;font-variant-numeric:tabular-nums}
.wk-gauge.warn .wk-gauge-pct{color:var(--up,#b06f14)}
.wk-gauge .wk-gauge-labels .wk-gauge-upd{opacity:.8;letter-spacing:.02em}

/* ─── カード情報量アップ＋今日のピックアップ複数化（2026-07-26 末尾追記。既存行は変更しない方針） ───
   1) .thumb-by: スクショ「内」右下の「by 作者名」オーバーレイ（半透明黒帯＋白小文字）。
      .thumb内は .ts-img(z:1) より上の z:2 で、topshots.js のフェード順送り中も常に最前面。
      .feat .bgimg内は .scrim/.info（z:auto）より上に出るよう同じく z:2。pointer-events:none でカード全体リンクを妨げない。
   2) .card .catch は既存定義（2行clamp・灰色小文字）をトップのカードでもそのまま使う。
      .feat（話題の新作）の紹介文 .bl のみ、ここで2行clampを追加（暗背景のため色は既存のまま）。
   3) .b-pick: 今日のピックアップのバッジ（藍の港トーンの藍グラデ＋金縁）。 */
.thumb .thumb-by,.feat .bgimg .thumb-by{position:absolute;right:5px;bottom:5px;z-index:2;
  font-size:10px;line-height:1.6;color:#fff;background:rgba(10,12,32,.62);border-radius:4px;padding:0 7px;
  max-width:88%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:.03em;
  pointer-events:none;text-shadow:0 1px 2px rgba(0,0,0,.6)}
/* .feat は下端に .info（タイトル・紹介文・統計）の帯が載り右下だと統計行と重なるため、
   by帯だけ右上すみに置く（NEWバッジは左上なので干渉しない。スクショ内固定表示は同じ）。 */
.feat .bgimg .thumb-by{bottom:auto;top:7px;right:7px;font-size:9.5px;background:rgba(10,12,32,.55)}
/* 話題の新作の紹介文: 2行で省略（カード情報量アップ。無い作品は枠ごと出ない既存挙動のまま） */
.feat .info .bl{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* 今日のピックアップ: バッジ */
.b-pick{background:linear-gradient(135deg,#4a4fb4,#22265f);border:1px solid var(--gold-soft,#d6c284)}
/* 投稿の種類選択と、読む一覧の絞り込みを視覚的に分ける。 */
.cmt-form{background:#fff;border:1px solid var(--line,#d8dbf0);border-radius:12px;padding:18px;margin:16px 0 24px;box-shadow:0 3px 12px #22265f08}
.cmt-form-title{font-weight:700;color:var(--indigo,#22265f);margin-bottom:10px}
.cmt-kind-prompt{font-size:11px;color:#777;font-weight:400;margin-right:4px}
.comment-kind.kind-review,.cmt-tab.kind-review{color:#644109;background:linear-gradient(120deg,#fff4bc 0%,#edcd70 45%,#fff4c5 70%,#dfb852 100%);border:1px solid #b78d32;border-radius:999px;box-shadow:inset 0 1px 2px #fff9,0 2px 5px #ad812329;font-weight:700}
.cmt-tab.kind-review.is-active{outline:2px solid #947020;outline-offset:2px;color:#513100}
.review-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:18px}
.review-toolbar label{margin-left:auto;font-size:13px}
.review-toolbar select{font:inherit;background:#fff;border:1px solid #c9b270;border-radius:7px;padding:6px}
.review-card{padding:18px;margin:12px 0;border:1px solid #ddca93;border-radius:12px;background:linear-gradient(135deg,#fffdf5,#fff);overflow-wrap:anywhere}
.review-card .who{font-weight:700;margin-right:8px}
.review-card time{font-size:12px;color:var(--sub,#7d81ab);margin-left:8px}
.review-body{margin:12px 0;line-height:1.85;overflow-wrap:anywhere;white-space:pre-wrap}
.review-helpful,.review-edit,.review-delete,.review-pages button{font:inherit;font-size:13px;border:1px solid #c9b270;background:#fffaf0;color:#634613;border-radius:999px;padding:6px 12px;cursor:pointer;margin:4px 8px 0 0}
.review-helpful[aria-pressed="true"]{background:#f4e2a5;border-color:#a17b23}
.review-helpful:disabled{cursor:default;opacity:.8}
.review-editor-status,.review-own,#reviewOwnBadge{color:#72510b;font-weight:700;font-size:13px}
.review-editor-status{padding:8px 10px;background:#fff8dc;border-radius:8px}
.review-pages{display:flex;align-items:center;gap:8px}
.latest-review{border-color:#d5bd7b;background:linear-gradient(120deg,#fffdf4,#fff6da)}
.review-history{max-width:880px;margin:24px auto;padding:0 16px 40px}
.review-history h1{font-size:22px}
@media(max-width:480px){.cmt-form{padding:12px}.review-card{padding:12px}.review-toolbar label{margin-left:0}}