/* PlayPoint article list: fixed square thumbnail slot for mixed article types. */
/* 記事の発見・再訪・絞り込みを、一覧の前で長く待たせない。 */
.hub-skip-link { position:fixed; top:8px; left:16px; z-index:10000; padding:10px 16px; background:var(--reading-surface); color:var(--reading-link); border:2px solid currentColor; transform:translateY(-200%); }
.hub-skip-link:focus { transform:none; }
@media(prefers-reduced-motion:reduce) {
  .hub-skip-link, html[lang="ja"] body.blog-index-compact .badge-new { animation:none!important; transition:none!important; }
}
html[lang="ja"] body.blog-index-compact .guide-hub-layout { margin-top:18px; }
html[lang="ja"] body.blog-index-compact .hub-heading { margin-bottom:8px; }
html[lang="ja"] body.blog-index-compact .hero-title { margin:0; font-size:27px; line-height:1.4; }
.hub-access-row { display:flex; align-items:baseline; flex-wrap:wrap; gap:0 20px; margin-top:4px; }
.hub-start-links { display:flex; gap:20px; margin:0; font-size:13px; }
html[lang="ja"] body.blog-index-compact #reading-library { flex:0 1 auto; width:auto; min-width:0; margin:0; padding:0; border:0; background:none; scroll-margin-top:16px; }
html[lang="ja"] body.blog-index-compact #reading-library > summary { width:max-content; max-width:100%; padding:6px 0; font-size:13px; min-height:32px; color:var(--reading-link); }
html[lang="ja"] body.blog-index-compact #reading-library[open] { flex-basis:100%; border-bottom:1px solid var(--reading-border); padding-bottom:12px; }
html[lang="ja"] body.blog-index-compact .hub-search-controls { display:grid; grid-template-columns:minmax(0,1fr) 210px; align-items:end; gap:12px; margin:0 0 8px; }
html[lang="ja"] body.blog-index-compact .hub-search-controls .game-filter-container { display:block; margin:0; }
html[lang="ja"] body.blog-index-compact .hub-search-controls :is(.guide-search-label,.game-filter-label) { display:block; margin:0 0 4px; font-size:13px; line-height:1.5; }
html[lang="ja"] body.blog-index-compact #search-input { min-height:44px; height:44px; padding:8px 12px; }
html[lang="ja"] body.blog-index-compact #game-title-filter { width:100%; height:44px; }
html[lang="ja"] body.blog-index-compact .article-filter-panel { margin:0 0 8px; border:0; background:none; }
html[lang="ja"] body.blog-index-compact .article-filter-panel > summary { width:max-content; max-width:100%; min-height:32px; padding:4px 0; color:var(--reading-link); }
html[lang="ja"] body.blog-index-compact .article-filter-panel-body { padding:8px 0; }
.hub-result-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:2px solid var(--reading-text); }
html[lang="ja"] body.blog-index-compact .hub-result-toolbar .article-list-heading { display:block; padding:0; margin:0; border:0; }
html[lang="ja"] body.blog-index-compact #article-list-title { margin:0; font-size:18px; line-height:1.5; scroll-margin-top:16px; }
html[lang="ja"] body.blog-index-compact .hub-result-toolbar .article-result-status { margin:3px 0 0; font-size:13px; }
html[lang="ja"] body.blog-index-compact .hub-result-toolbar .sort-container { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.hub-result-toolbar label { font-size:13px; }
html[lang="ja"] body.blog-index-compact #sort-toggle { width:140px; height:40px; min-height:40px; margin:0; padding:6px 10px; border:1px solid var(--reading-border); border-radius:6px; background:var(--reading-surface); color:var(--reading-text); font-size:14px; }
.article-page-summary { margin:6px 0 0; color:var(--reading-muted); font-size:13px; line-height:1.5; }
html[lang="ja"] body.blog-index-compact .article-card .card-meta { flex-wrap:wrap; gap:6px 10px; font-size:13px; }
html[lang="ja"] body.blog-index-compact .badge-new { position:static; animation:none; font-size:12px; letter-spacing:0; }
html[lang="ja"] body.blog-index-compact .article-card .card-desc { line-height:1.7; }
.hub-reading-next { display:flex; flex-wrap:wrap; gap:12px 24px; margin:24px 0; padding-top:16px; border-top:1px solid var(--reading-border); font-size:14px; }
html[lang="ja"] body.blog-index-compact .game-search-links { margin-top:20px; padding:12px 0; border:0; border-top:1px solid var(--reading-border); background:none; }
@media(max-width:760px) {
  html[lang="ja"] body.blog-index-compact .hub-search-controls { grid-template-columns:minmax(0,1fr) 145px; gap:8px; }
  html[lang="ja"] body.blog-index-compact .hero-title { font-size:22px; }
  .hub-start-links { gap:14px; margin:0; }
  html[lang="ja"] body.blog-index-compact .hub-result-toolbar { align-items:flex-start; }
  html[lang="ja"] body.blog-index-compact .hub-result-toolbar .sort-container { display:block; }
  html[lang="ja"] body.blog-index-compact .hub-result-toolbar label { display:block; margin-bottom:3px; }
  html[lang="ja"] body.blog-index-compact #sort-toggle { width:116px; }
}
@media(max-width:480px) {
  html[lang="ja"] body.blog-index-compact .hub-search-controls { grid-template-columns:minmax(0,1fr); }
  html[lang="ja"] body.blog-index-compact .hub-search-controls .game-filter-container { display:grid; grid-template-columns:52px minmax(0,1fr); align-items:center; }
  html[lang="ja"] body.blog-index-compact .hub-search-controls .game-filter-label { margin:0; }
}
html[lang="ja"] body.blog-index-compact .article-card,
html[lang="ja"] body.blog-index-compact .article-card.article-card--visual {
  grid-template-columns:120px minmax(0,1fr);
  gap:20px;
  align-items:start;
  padding:22px 0;
}
html[lang="ja"] body.blog-index-compact .article-card .card-thumb,
html[lang="ja"] body.blog-index-compact .article-card--visual .card-thumb {
  width:100%;
  height:auto;
  min-height:0;
  padding:0;
  box-sizing:border-box;
  aspect-ratio:1;
  align-self:start;
  overflow:hidden;
  border-radius:8px;
  background:var(--reading-soft);
}
/* 初期HTMLのpictureも、動的カードと同じ正方形の枠を使う。 */
html[lang="ja"] body.blog-index-compact .article-card .card-thumb picture {
  display:block;
  width:100%;
  height:100%;
}
html[lang="ja"] body.blog-index-compact .article-card .card-thumb img,
html[lang="ja"] body.blog-index-compact .article-card--visual .card-thumb img {
  display:block;
  width:100%;
  height:100%;
  padding:0;
  box-sizing:border-box;
  border-radius:0;
  object-fit:cover;
  object-position:center;
  transform:none;
}
html[lang="ja"] body.blog-index-compact .article-card .card-thumb--focus-left img,
html[lang="ja"] body.blog-index-compact .article-card--visual .card-thumb--focus-left img {
  object-position:left center;
}
html[lang="ja"] body.blog-index-compact .article-card .card-thumb--focus-right img,
html[lang="ja"] body.blog-index-compact .article-card--visual .card-thumb--focus-right img {
  object-position:right center;
}
html[lang="ja"] body.blog-index-compact .article-card .card-thumb--app-icon img {
  object-fit:contain;
}
@media(max-width:760px) {
  /* Blog-only mobile navigation placement; shared article pages stay untouched. */
  html[lang="ja"].guide-navigation-enabled body.blog-index-compact .guide-nav-button[aria-controls="guide-menu"] {
    grid-column:3;
    grid-row:1;
  }
  html[lang="ja"].guide-navigation-enabled body.blog-index-compact .guide-header-spacer {
    grid-column:1;
    grid-row:1;
  }
  html[lang="ja"] body.blog-index-compact #guide-menu {
    inset:0 0 0 auto;
    box-shadow:-8px 0 40px #102d4330;
  }

  /* Mobile is article-first: keep search usable, but let the first story enter the initial view. */
  html[lang="ja"] body.blog-index-compact .breadcrumb,
  html[lang="ja"] body.blog-index-compact .guide-eyebrow,
  html[lang="ja"] body.blog-index-compact .guide-intro,
  html[lang="ja"] body.blog-index-compact .guide-search-label {
    display:none;
  }
  html[lang="ja"] body.blog-index-compact .hero-section {
    margin:0 0 2px;
    padding:0;
  }
  html[lang="ja"] body.blog-index-compact .hero-title {
    margin:0;
    font-size:22px;
    line-height:1.4;
  }
  html[lang="ja"] body.blog-index-compact .search-sort-row--primary {
    margin:0 0 8px;
  }
  html[lang="ja"] body.blog-index-compact #search-input {
    min-height:44px;
  }
  html[lang="ja"] body.blog-index-compact .game-filter-container {
    margin:0 0 8px;
  }
  html[lang="ja"] body.blog-index-compact .search-pathways--primary {
    margin:6px 0;
  }
  html[lang="ja"] body.blog-index-compact .search-pathways--primary .search-pathways-grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px;
  }
  html[lang="ja"] body.blog-index-compact .search-pathways--primary .pathway-trouble {
    display:none;
  }
  html[lang="ja"] body.blog-index-compact .search-pathways--primary .search-pathway-card {
    min-height:44px;
    padding:5px 4px;
    text-align:center;
  }
  html[lang="ja"] body.blog-index-compact .search-pathways--primary .pathway-title {
    font-size:12px;
    line-height:1.35;
    white-space:nowrap;
  }
  html[lang="ja"] body.blog-index-compact .search-pathways--primary .pathway-arrow {
    display:none;
  }
  html[lang="ja"] body.blog-index-compact .article-filter-panel {
    margin:6px 0 2px;
  }
  html[lang="ja"] body.blog-index-compact .article-filter-panel > summary {
    min-height:40px;
    padding:8px 12px;
  }
  html[lang="ja"] body.blog-index-compact .article-list-heading {
    padding-bottom:8px;
  }
  html[lang="ja"] body.blog-index-compact .article-card,
  html[lang="ja"] body.blog-index-compact .article-card.article-card--visual {
    grid-template-columns:96px minmax(0,1fr);
    grid-template-areas:
      ". meta"
      "thumb main";
    column-gap:14px;
    row-gap:0;
    padding:14px 0;
  }
  /* The meta row can change height; the thumbnail always starts with the headline row. */
  html[lang="ja"] body.blog-index-compact .article-card .card-content {
    display:contents;
  }
  html[lang="ja"] body.blog-index-compact .article-card .card-meta {
    grid-area:meta;
  }
  html[lang="ja"] body.blog-index-compact .article-card .card-main {
    grid-area:main;
    min-width:0;
  }
  html[lang="ja"] body.blog-index-compact .article-card .card-main h3 {
    margin-top:0;
  }
  html[lang="ja"] body.blog-index-compact .article-card .card-thumb,
  html[lang="ja"] body.blog-index-compact .article-card--visual .card-thumb {
    grid-area:thumb;
    margin-top:0;
  }
}
@media(max-width:360px) {
  html[lang="ja"] body.blog-index-compact .search-pathways--primary .search-pathway-card {
    padding-inline:2px;
  }
  html[lang="ja"] body.blog-index-compact .search-pathways--primary .pathway-card-header,
  html[lang="ja"] body.blog-index-compact .search-pathways--primary .pathway-title {
    min-width:0;
  }
  html[lang="ja"] body.blog-index-compact .search-pathways--primary .pathway-title {
    font-size:11px;
    letter-spacing:-.02em;
    white-space:normal;
    overflow-wrap:anywhere;
  }
  html[lang="ja"] body.blog-index-compact .article-card,
  html[lang="ja"] body.blog-index-compact .article-card.article-card--visual {
    grid-template-columns:64px minmax(0,1fr);
    gap:8px;
  }
}

/* 共有シェルの検索欄全幅指定を、この一覧の2列に限定して戻す。 */
html[lang="ja"] body.blog-index-compact .hub-search-controls > .search-container { grid-column:auto; width:auto; min-width:0; max-width:none; }
html[lang="ja"] body.blog-index-compact #article-result-status.visually-hidden { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap; }
@media(min-width:1000px) { html[lang="ja"] body.blog-index-compact #article-filter-panel { display:none; } }
@media(max-width:760px) { html[lang="ja"] body.blog-index-compact .hub-access-row { gap:0 14px; } }

/* 検索とカテゴリーを主役にし、ゲーム選択は必要になったときだけ表示する。 */
html[lang="ja"] body.blog-index-compact .reader-entry-questions { display:flex; flex-wrap:wrap; gap:4px 16px; margin:0 0 8px; }
html[lang="ja"] body.blog-index-compact .reader-entry-questions a { display:inline-flex; align-items:center; min-height:44px; padding:0; border:0; border-radius:0; background:none; text-decoration:underline; text-underline-offset:3px; }
html[lang="ja"] body.blog-index-compact .reader-entry-questions strong { font-size:14px; font-weight:600; }
html[lang="ja"] body.blog-index-compact .browse-filter-container { min-width:0; }
html[lang="ja"] body.blog-index-compact .browse-filter-label { display:block; margin:0 0 4px; font-size:13px; }
html[lang="ja"] body.blog-index-compact #browse-category-filter { width:100%; max-width:100%; min-width:0; min-height:44px; padding:8px 10px; border:1px solid var(--reading-border); border-radius:6px; background:var(--reading-surface); color:var(--reading-text); font-family:inherit; font-size:14px; line-height:1.5; }
html[lang="ja"] body.blog-index-compact .blog-discovery > .game-filter-container { margin:8px 0; grid-template-columns:52px minmax(0,1fr); max-width:100%; }
html[lang="ja"] body.blog-index-compact .game-filter-container[hidden] { display:none; }
html[lang="ja"] body.blog-index-compact [data-hub-menu-tools] { margin:24px 0; }
html[lang="ja"] body.blog-index-compact .guide-menu-body [data-hub-menu-tools] { margin:0; }
html[lang="ja"] body.blog-index-compact .guide-menu-body .hub-access-row { display:block; }
html[lang="ja"] body.blog-index-compact .guide-menu-body .reader-question-links { display:grid; gap:0; margin:8px 0; }
html[lang="ja"] body.blog-index-compact .guide-menu-body .reading-resume { margin:8px 0; padding:12px; }
html[lang="ja"] body.blog-index-compact .guide-menu-body #reading-library > summary { min-height:44px; font-size:15px; }
@media(min-width:761px) {
  html[lang="ja"] body.blog-index-compact.hub-menu-ready .guide-nav-button[aria-controls="guide-menu"] { display:flex; order:2; align-items:center; gap:6px; width:auto; min-height:44px; margin:0 0 0 16px; padding:8px 12px; border:1px solid var(--reading-border); border-radius:6px; background:var(--reading-surface); color:var(--reading-text); font:inherit; cursor:pointer; }
}
@media(max-width:480px) {
  html[lang="ja"] body.blog-index-compact .browse-filter-container { display:grid; grid-template-columns:76px minmax(0,1fr); align-items:center; gap:8px; }
  html[lang="ja"] body.blog-index-compact .browse-filter-label { margin:0; }
  html[lang="ja"] body.blog-index-compact .reader-entry-questions { gap:0 12px; }
  html[lang="ja"] body.blog-index-compact .reader-entry-questions a { min-height:36px; }
  html[lang="ja"] body.blog-index-compact .reader-entry-questions strong { font-size:13px; }
}