/* Idea Nook — 紙の切り絵の隠れ家（デザイン23） */
/* 書体はサイトから配る（Google Fonts へ接続しない。使う文字だけに絞った woff2 を build.mjs が作る。ライセンスは同じフォルダの OFL-*.txt） */
@font-face { font-family: "Zen Kaku Gothic New"; src: url(fonts/ZenKakuGothicNew-Regular.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap }
@font-face { font-family: "Zen Kaku Gothic New"; src: url(fonts/ZenKakuGothicNew-Medium.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap }
@font-face { font-family: "Zen Kaku Gothic New"; src: url(fonts/ZenKakuGothicNew-Bold.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap }
@font-face { font-family: "Zen Old Mincho"; src: url(fonts/ZenOldMincho-SemiBold.woff2) format("woff2"); font-weight: 600; font-style: normal; font-display: swap }
@font-face { font-family: "Zen Old Mincho"; src: url(fonts/ZenOldMincho-Bold.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap }
@font-face { font-family: "Zen Old Mincho"; src: url(fonts/ZenOldMincho-Black.woff2) format("woff2"); font-weight: 900; font-style: normal; font-display: swap }
:root {
  --bg: #efe4d1;
  --paper: #fbf6ec;
  --paper-2: #f3ead9;
  --ink: #33302b;
  --ink-soft: #6b6359;
  --line: #e2d5bf;
  --slate: #57799a;      /* Nook Games の札・ボタン */
  --slate-hi: #4b6c8c;
  --leaf: #6c8d66;       /* Nook Guides の札 */
  --coral: #d36f58;      /* その他の札・新着のボタン */
  --coral-hi: #c25f49;
  --heart: #c4554a;
  --kraft: #c9a173;
  --shadow: rgba(70, 45, 20, .28);
  --radius: 6px;
  --font: "Zen Kaku Gothic New", "Yu Gothic UI", "Hiragino Sans", sans-serif;
  --font-head: "Zen Old Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #2b241c; --paper: #3a3127; --paper-2: #43392d; --ink: #f1e8da; --ink-soft: #cbbda8; --line: #5a4c3b;
    --shadow: rgba(0, 0, 0, .45); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #2b241c; --paper: #3a3127; --paper-2: #43392d; --ink: #f1e8da; --ink-soft: #cbbda8; --line: #5a4c3b;
  --shadow: rgba(0, 0, 0, .45); color-scheme: dark;
}

* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body {
  margin: 0; color: var(--ink); font-family: var(--font); line-height: 1.75; min-height: 100vh; overflow-x: hidden;
  background: var(--bg) url(art/paper.webp) repeat; background-size: 420px; background-blend-mode: multiply;
  position: relative;
}
img { max-width: 100%; height: auto; display: block }
a { color: var(--slate-hi) }
svg { width: 1em; height: 1em; flex: none }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0) }
[hidden] { display: none !important }

.preview-bar { background: #f2c94c; color: #3a2a00; font-size: 0.8125rem; text-align: center; padding: 4px 16px; position: relative; z-index: 3 }
.todo { background: #fde7a8; color: #6b3d00; border: 1px dashed #c98a00; border-radius: 4px; padding: 0 6px; font-size: .9em }

/* 破れた紙のふち */
.torn { -webkit-mask: url(art/torn.svg) 0 0 / 100% 100% no-repeat; mask: url(art/torn.svg) 0 0 / 100% 100% no-repeat }
.paper { background: var(--paper) url(art/paper.webp) repeat; background-size: 360px }

/* 左右の飾り（広い画面だけ） */
.deco { position: absolute; top: 0; width: clamp(150px, calc((100vw - 1240px) / 2 + 40px), 300px); height: 900px; pointer-events: none; z-index: 0;
  background: no-repeat top / contain; display: none }
.deco-left { left: 0; background-image: url(art/side-left.webp); background-position: left 70px }
.deco-right { right: 0; background-image: url(art/side-right.webp); background-position: right 60px }
@media (min-width: 1500px) { .deco { display: block } }

/* ---------- ヘッダー：上が雲のように波打つ紙の帯 ---------- */
.site-head { position: relative; z-index: 2; padding: 0 16px }
.head-in {
  max-width: 1160px; margin: 0 auto; display: flex; align-items: center; gap: 18px; padding: 22px 30px 16px;
  background: var(--paper) url(art/paper.webp) repeat; background-size: 360px;
  border-radius: 0 0 14px 14px; filter: drop-shadow(0 3px 4px var(--shadow));
  -webkit-mask: radial-gradient(16px at 50% -4px, #0000 98%, #000) 0 0 / 40px 100% repeat-x;
  mask: radial-gradient(16px at 50% -4px, #0000 98%, #000) 0 0 / 40px 100% repeat-x;
}
.brand { min-width: 0; flex: 0 1 auto }
@media (max-width: 980px) { .brand { flex: 1 1 0 } }
.logo { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; font-family: var(--font-head); font-weight: 900; font-size: 2.125rem; line-height: 1.1; white-space: nowrap }
.logo svg { width: 40px; height: 40px; color: #3f3d3a }
.lead { margin: 4px 0 0 52px; font-size: 0.8125rem; color: var(--ink-soft); line-height: 1.5 }
.site-nav { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap }
.site-nav a {
  color: var(--ink); text-decoration: none; padding: 7px 16px; font-size: 0.875rem; border-radius: 4px;
  background: var(--paper-2); border: 1px solid var(--line); box-shadow: 0 1px 0 var(--shadow); transform: rotate(-.4deg)
}
.site-nav a:nth-child(even) { transform: rotate(.5deg) }
.site-nav a:hover { background: #fff }
.site-nav a[aria-current="page"] { background: var(--slate); border-color: var(--slate); color: #fff }
.nav-toggle { display: none; margin-left: auto; background: none; border: 0; padding: 8px; cursor: pointer }
.nav-toggle span { display: block; width: 24px; height: 2.5px; background: var(--ink); margin: 5px 0; border-radius: 2px }
@media (max-width: 980px) {
  .head-in { flex-wrap: wrap; padding: 20px 18px 12px }
  .logo { font-size: 1.625rem } .logo svg { width: 32px; height: 32px } .lead { margin-left: 44px; font-size: 0.75rem }
  .nav-toggle { display: block; align-self: flex-start }
  .site-nav { display: none; width: 100%; gap: 6px; padding-bottom: 6px }
  .site-nav.open { display: flex }
  .site-nav a { transform: none }
}

main { display: block; position: relative; z-index: 1 }

/* ---------- ボタン・札 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--slate); color: #fff; text-decoration: none; border: 0;
  border-radius: 999px; padding: 9px 26px; font-weight: 700; font-size: 0.9375rem; font-family: inherit; cursor: pointer; box-shadow: 0 2px 0 rgba(0,0,0,.18)
}
.btn:hover { background: var(--slate-hi) }
.btn-sm { padding: 3px 18px; font-size: 0.8125rem }
.btn-hero { background: var(--coral); font-size: 1.1875rem; padding: 12px 40px }
.btn-hero:hover { background: var(--coral-hi) }
.btn-ghost { background: var(--paper); color: var(--ink); border: 1.5px solid var(--line); box-shadow: none }
.btn-ghost:hover { background: #fff }
.tag { display: inline-block; font: 700 0.6875rem/1.6 var(--font); color: #fff; background: var(--slate); border-radius: 3px; padding: 0 7px; margin-left: 6px; vertical-align: 3px }
.tag-draft { background: #c98a00 }
.tag-guide { background: var(--leaf) } .tag-tool, .tag-story, .tag-experiment { background: var(--coral) }
.chip { font: inherit; font-size: 0.875rem; background: var(--paper); color: var(--ink); border: 1.5px solid var(--line); border-radius: 999px; padding: 3px 14px; cursor: pointer }
.chip.on { background: var(--slate); border-color: var(--slate); color: #fff }

/* 破れた紙の札（新着・棚の名前） */
.ribbon {
  display: inline-block; margin: 0; padding: 6px 30px 7px 22px; font: 700 1.625rem/1.2 var(--font-head); color: #fff; background: var(--slate);
  -webkit-mask: url(art/torn.svg) 0 0 / 100% 100% no-repeat; mask: url(art/torn.svg) 0 0 / 100% 100% no-repeat;
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 50%, 100% 100%, 0 100%);
}
.ribbon-new { background: var(--paper); color: var(--ink); font-size: 1.875rem; padding: 8px 34px 9px 24px }
.ribbon-guides { background: var(--leaf) }
.ribbon-ideas { background: var(--coral) }

/* ---------- トップ ---------- */
.home-wrap { max-width: 1160px; margin: 18px auto 0; padding: 0 16px 10px }

/* 新着：木の額の中に破れた紙の絵と札 */
.hero {
  position: relative; display: grid; grid-template-columns: 1.85fr 1fr; align-items: center; gap: 0;
  padding: 22px 20px 18px; border-radius: 6px; margin-bottom: 18px;
  background: var(--kraft) url(art/kraft.webp) repeat; background-size: 420px;
  box-shadow: inset 0 0 0 6px rgba(120, 80, 40, .18), 0 6px 14px var(--shadow);
}
.hero .ribbon-new { position: absolute; left: 6px; top: -10px; z-index: 2; transform: rotate(-2deg); filter: drop-shadow(0 2px 2px var(--shadow)) }
.hero-art { aspect-ratio: 3 / 1; overflow: hidden; background: #2d3a55 }
.hero-art img { width: 100%; height: 100%; object-fit: cover }
.hero-card { margin-left: -40px; padding: 22px 26px 20px; text-align: center; position: relative; z-index: 1;
  background: var(--paper) url(art/paper.webp) repeat; background-size: 360px; filter: drop-shadow(0 3px 3px var(--shadow)) }
.hero-card h1 { font: 900 clamp(1.75rem, 3.4vw, 2.75rem)/1.2 var(--font-head); margin: 4px 0 6px; letter-spacing: .03em }
.hero-sum { margin: 0 0 18px; font: 600 clamp(0.875rem, 1.4vw, 1.125rem)/1.6 var(--font-head); color: var(--ink) }
.hero-empty { grid-template-columns: 1fr }
.hero-empty .hero-card { margin: 0 }
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; padding: 22px 12px 14px }
  .hero-card { margin: -26px 14px 0 }
  .hero-art { aspect-ratio: 16 / 8 }
}

/* 棚：紙の札＋カード＋厚紙の板 */
.shelf { position: relative; padding: 0 0 30px; margin-bottom: 8px }
.shelf::after {
  content: ""; position: absolute; left: -10px; right: -10px; bottom: 6px; height: 20px; border-radius: 3px;
  background: var(--kraft) url(art/kraft.webp) repeat; background-size: 420px;
  box-shadow: inset 0 -5px 0 rgba(110, 70, 30, .25), 0 6px 8px var(--shadow);
}
.shelf-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 0 0 -4px -6px; position: relative; z-index: 2 }
.shelf-head .ribbon { transform: rotate(-1.2deg); filter: drop-shadow(0 2px 2px var(--shadow)) }
.more { font-size: 0.8125rem; color: var(--ink-soft); text-decoration: none; padding: 2px 4px }
.more::after { content: " →" }
.more:hover { color: var(--ink) }
.shelf-row {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 16px; padding: 14px 4px 10px;
  filter: drop-shadow(0 3px 3px var(--shadow)); position: relative; z-index: 1
}
.shelf-guides .shelf-row { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)) }
@media (max-width: 760px) {
  .shelf-row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; padding-bottom: 14px }
  .shelf-row .card { flex: 0 0 86%; scroll-snap-align: start }
  .shelf-guides .shelf-row { grid-template-columns: none }
  .shelf-guides .card { grid-template-columns: 112px 1fr }
  .shelf-guides .card-thumb { aspect-ratio: 1 / 1 }
}

/* カード：破れた紙。左に絵、右に題・一行説明・ボタン */
.card {
  display: grid; grid-template-columns: 112px 1fr; gap: 12px; align-items: stretch; padding: 13px 14px 12px 13px;
  background: var(--paper) url(art/paper.webp) repeat; background-size: 360px;
  -webkit-mask: url(art/torn.svg) 0 0 / 100% 100% no-repeat; mask: url(art/torn.svg) 0 0 / 100% 100% no-repeat;
}
.shelf-guides .card { grid-template-columns: 150px 1fr }
.card-thumb { display: block; border-radius: 4px; overflow: hidden; background: var(--paper-2); aspect-ratio: 1 / 1; align-self: center; position: relative }
.card-thumb .tag { position: absolute; left: 4px; top: 4px; margin: 0; z-index: 1 }
.shelf-guides .card-thumb { aspect-ratio: 16 / 11 }
.card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s }
.card:hover .card-thumb img { transform: scale(1.05) }
.card-body { display: flex; flex-direction: column; min-width: 0 }
.card-title { font: 700 1.0625rem/1.4 var(--font-head); margin: 2px 0 2px }
.card-title a { color: var(--ink); text-decoration: none }
.card-title a:hover { text-decoration: underline }
.card-sum { margin: 0; font-size: 0.7813rem; line-height: 1.55; color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.card-foot { margin: auto 0 0; padding-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px }
.mini-like { display: inline-flex; align-items: center; gap: 4px; color: var(--heart); font-size: 0.7813rem; font-weight: 700 }
.mini-like[hidden] { display: none }

/* 広告：紙の帯の両端に丘。見出しは「広告」だけ */
.ad-band { margin: 4px -6px 26px }
.ad { margin: 26px 0; text-align: center }
.ad-label { margin: 0 0 4px; font-size: 0.75rem; color: var(--ink-soft); letter-spacing: .1em }
.ad-band .ad { margin: 0; padding: 14px 18px 18px; position: relative; min-height: 120px; border-radius: 4px; box-shadow: 0 3px 6px var(--shadow);
  background: url(art/hills.webp) center bottom / 100% auto no-repeat, var(--paper) url(art/paper.webp) repeat; background-size: 100% auto, 360px }
.ad-preview .ad-box { border: 2px dashed #c98a00; background: rgba(251, 240, 210, .85); color: #7a5200; border-radius: 6px; min-height: 90px; display: grid; place-items: center; font-size: 0.8125rem; padding: 10px; line-height: 1.6 }
.ad-band .ad-box { max-width: 52%; margin: 0 auto }
@media (max-width: 760px) { .ad-band .ad { background-size: 200% auto, 360px } .ad-band .ad-box { max-width: none } }
.ad-side .ad-box { min-height: 600px }
.ad-inline { margin: 34px 0 }

/* ---------- 一覧・作品のページ ---------- */
.page { max-width: 1160px; margin: 18px auto 0; padding: 0 16px 40px }
.page-head { padding: 18px 28px; margin-bottom: 18px; background: var(--paper) url(art/paper.webp) repeat; background-size: 360px; border-radius: 6px; box-shadow: 0 3px 6px var(--shadow) }
.page-head h1 { font: 900 1.875rem/1.3 var(--font-head); margin: 0; display: flex; align-items: center; gap: 10px }
.page-head p { margin: 2px 0 0; color: var(--ink-soft) }
.shelf-icon svg { width: 28px; height: 28px; vertical-align: -5px }
.tools { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-bottom: 16px }
.filters, .sort { display: flex; gap: 8px; flex-wrap: wrap }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; filter: drop-shadow(0 3px 3px var(--shadow)) }
.empty { background: var(--paper); border-radius: 6px; padding: 24px; text-align: center }

.crumbs { font-size: 0.8125rem; color: var(--ink-soft); margin-bottom: 4px }
.crumbs a { color: var(--ink-soft) }
.work-head h1 { font: 900 clamp(1.625rem, 3vw, 2.25rem)/1.3 var(--font-head); margin: 4px 0 }
.work-tags { margin: 0 } .work-tags .tag { margin-left: 0; margin-right: 6px }
.work-sum { margin: 0; color: var(--ink-soft) }
.work-meta { margin: 4px 0 0; font-size: 0.8125rem; color: var(--ink-soft) }

.game-main, .article-layout, .page-static .prose {
  background: var(--paper) url(art/paper.webp) repeat; background-size: 360px; border-radius: 6px; box-shadow: 0 4px 10px var(--shadow); padding: 20px 28px 30px
}
.article-layout, .page-static .prose { max-width: 860px; margin: 0 auto }
@media (max-width: 760px) { .game-main, .article-layout, .page-static .prose, .page-head { padding: 14px 16px 24px } }

/* ゲーム：遊ぶ画面と広告の間はつねに150px以上（AdSense の推奨） */
.game-layout { display: block }
.play { margin: 16px 0 0 }
.play-frame { position: relative; width: 100%; background: #1d1a17; border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 6px var(--kraft), 0 6px 12px var(--shadow) }
.play-frame iframe { width: 100%; height: 100%; border: 0; display: block }
/* 全画面のときだけ右上に出すボタン（全画面をやめる・音） */
.play-tools { display: none; position: absolute; top: 10px; right: 10px; gap: 8px; z-index: 5 }
.play-tools .btn { background: rgba(30, 26, 22, .72); border: 1px solid rgba(255, 255, 255, .35); box-shadow: none; padding: 6px 14px }
.play-tools .btn:hover { background: rgba(30, 26, 22, .9) }
.play-frame:fullscreen .play-tools, .play-frame:-webkit-full-screen .play-tools, .play-frame.is-full .play-tools { display: flex }
.play-frame:fullscreen, .play-frame:-webkit-full-screen { border-radius: 0; box-shadow: none; aspect-ratio: auto !important }
/* 本物の全画面が使えない端末（iPhone など）は、画面いっぱいに広げる */
.play-frame.is-full { position: fixed; inset: 0; z-index: 1000; width: 100vw; height: 100dvh; aspect-ratio: auto !important; border-radius: 0; box-shadow: none }
body.playing-full { overflow: hidden }
.play-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 0.8125rem; color: var(--ink-soft); margin: 14px 0 0 }
.howto, .notes, .related { margin-top: 26px }
.howto h2, .notes h2, .related h2 { font: 700 1.25rem/1.4 var(--font-head); margin: 18px 0 6px }
.notes ul, .howto ul { margin: 0; padding-left: 1.3em }
.history li time { margin-right: 10px; color: var(--ink-soft) }
.like-row { display: flex; align-items: center; gap: 12px; margin: 18px 0 0; font-size: 0.875rem; color: var(--ink-soft) }
.like { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-weight: 700; color: var(--heart); background: var(--paper); border: 2px solid var(--heart); border-radius: 999px; padding: 5px 16px; cursor: pointer }
.like svg { width: 20px; height: 20px }
.like.liked { background: var(--heart); color: #fff }
.like:disabled { cursor: default }
.related .shelf-row { padding-left: 0; padding-right: 0 }

.ad-after-game { margin-top: 48px }
.game-side { display: none }
@media (min-width: 1340px) {
  .game-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: 160px; align-items: start }
  .game-side { display: block; position: sticky; top: 24px }
  /* ゲームのページは遊ぶ画面を大きく：横幅を広げ、左右の飾りは出さない */
  body.work-game .page { max-width: 1560px }
  body.work-game .deco { display: none }
}

/* 読み物 */
.toc { background: var(--paper-2); border-radius: 6px; padding: 10px 18px; margin: 18px 0; font-size: 0.875rem }
.toc p { margin: 0; font-weight: 700 }
.toc ol { margin: 4px 0 0; padding-left: 1.4em }
.prose h1 { font: 900 1.875rem/1.3 var(--font-head); margin: 6px 0 14px }
.prose h2 { font: 700 1.375rem/1.4 var(--font-head); margin: 30px 0 8px; padding-bottom: 4px; border-bottom: 2px solid var(--line); scroll-margin-top: 20px }
.prose p, .prose li { font-size: 1rem }
.figure { margin: 18px 0 }
.figure img { width: 100%; max-width: 480px; margin: 0 auto; border-radius: 6px; background: var(--paper-2) }
.figure figcaption { font-size: 0.8125rem; color: var(--ink-soft); text-align: center; margin-top: 6px }

/* ---------- フッター ---------- */
.site-foot { position: relative; z-index: 1; max-width: 1160px; margin: 10px auto 0; padding: 18px 16px 26px; color: var(--ink-soft); font-size: 0.8125rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 4px 0 }
.site-foot nav a { color: var(--ink-soft); text-decoration: none; padding: 0 12px; border-left: 1px solid var(--line) }
.site-foot nav a:first-child { border-left: 0; padding-left: 0 }
.site-foot nav a:hover { color: var(--ink) }
.site-foot p { margin: 0 }

/* ---------- 2026-10-07 公開前の点検の直し。元の指定は残し、ここで上書きする ---------- */
/* ダークモード：紙の画像は不透明なので、色を変えても紙は明るいまま→文字が読めなかった。画像に色を掛け合わせて暗くする */
:root[data-theme="dark"] :is(.head-in, .hero-card, .card, .page-head, .game-main, .article-layout, .prose, .paper) { background-blend-mode: multiply }
:root[data-theme="dark"] .ad-band .ad { background-blend-mode: normal, multiply }
:root[data-theme="dark"] :is(.site-nav a:hover, .btn-ghost:hover) { background: var(--paper-2) }
:root[data-theme="dark"] .logo svg { color: var(--ink) }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.head-in, .hero-card, .card, .page-head, .game-main, .article-layout, .prose, .paper) { background-blend-mode: multiply }
  :root:not([data-theme="light"]) .ad-band .ad { background-blend-mode: normal, multiply }
  :root:not([data-theme="light"]) :is(.site-nav a:hover, .btn-ghost:hover) { background: var(--paper-2) }
  :root:not([data-theme="light"]) .logo svg { color: var(--ink) }
}

/* 画面いっぱいに広げたとき：main の重なりの区切りを一番上へ。ヘッダーが遊ぶ画面や「全画面をやめる」を隠していた */
body.playing-full main { z-index: 1000 }
body.playing-full :is(.site-head, .deco, .preview-bar) { visibility: hidden }

/* 右の広告の列は、広告が入るときだけ作る（空の列で本文が左に寄っていた） */
@media (min-width: 1340px) {
  .game-layout { display: block }
  .game-layout.has-side { display: grid }
  body.work-game .page { max-width: 1160px }
  body.work-game .page:has(.has-side) { max-width: 1560px }
}

/* カード：説明が2行で切れて読めなかった。幅を広げ3行まで見せる（狭い画面では画面の幅を超えない） */
.shelf-row { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)) }
.grid { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)) }
.card-thumb { align-self: start }
.card-title { overflow-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden }
.card-sum { -webkit-line-clamp: 3; text-wrap: pretty }

/* 見出しの最後の1〜2文字だけが次の行に落ちないように */
:is(.prose h1, .work-head h1, .page-head h1, .hero-card h1) { text-wrap: balance }
.more, .btn { white-space: nowrap }
/* 棚の見出し：札と「すべて見る」が並びきらない幅（280px・文字の拡大）では折り返す */
.shelf-head { flex-wrap: wrap }
.shelf-head .ribbon { max-width: 100% }
.card-foot { flex-wrap: wrap; gap: 4px 8px }
@media (max-width: 400px) { .card { grid-template-columns: 80px 1fr } .shelf-guides .card { grid-template-columns: 80px 1fr } }

/* 指で押すもの：44px 以上 */
@media (pointer: coarse) {
  .btn-sm, .chip { min-height: 44px }
  .more { display: inline-block; padding: 10px 8px }
  .site-foot nav a { padding: 10px 12px }
  .site-foot nav { gap: 0 }
  .nav-toggle { min-width: 44px; min-height: 44px }
  .play-tools .btn { min-height: 44px }
}
/* スマホの横持ち：新着の絵が最初の画面を埋めていた */
@media (max-height: 500px) and (orientation: landscape) { .hero-art { aspect-ratio: 3 / 1 } }

/* PC だけで遊べる作品の注意書き（指で触る端末・狭い画面だけに出す） */
.pc-only-note { display: none; margin: 0 0 12px; padding: 8px 14px; border-radius: 6px; background: var(--paper-2); border: 1px solid var(--line); font-size: 0.875rem; color: var(--ink) }
@media (pointer: coarse), (max-width: 760px) { .pc-only-note { display: block } }

/* 「よかったら」の感想の受付：目立たせない一文 */
.feedback { margin: 10px 0 0; font-size: 0.875rem; color: var(--ink-soft) }
.feedback a { color: var(--slate-hi) }

/* 2周目の点検の直し（2026-10-07） */
/* 狭い画面・大きい文字：ロゴがメニューボタンに重なっていた */
@media (max-width: 980px) {
  .head-in { gap: 8px }
  .logo { white-space: normal }
}
@media (max-width: 380px) { .logo { font-size: 1.25rem } .logo svg { width: 28px; height: 28px } .lead { margin-left: 0 } }
/* ダークモードの本文のリンク：暗い青灰色で読みにくかった（コントラスト比 約2.2）→明るい青に */
:root { --link: var(--slate-hi) }
:root[data-theme="dark"] { --link: #9db8d3 }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --link: #9db8d3 } }
a, .feedback a { color: var(--link) }
/* 指で押すもの：いいね・フッター・すべて見る も 44px 以上に */
@media (pointer: coarse) {
  .like { min-height: 44px }
  .site-foot nav a { padding-top: 11px; padding-bottom: 11px }
  .more { padding-top: 11px; padding-bottom: 11px }
}
/* フッターのリンクが折り返したとき、2行目の先頭に縦線が出ていた→縦線をやめて間隔で区切る */
.site-foot nav { gap: 0 18px }
.site-foot nav a, .site-foot nav a:first-child { border-left: 0; padding-left: 0; padding-right: 0 }
/* Windows のハイコントラスト：ボタンが枠の無い文字だけになっていた */
@media (forced-colors: active) {
  .btn, .chip, .like { border: 2px solid ButtonText }
  .card-thumb, .play-frame { forced-color-adjust: none }
}
/* 動きを減らす設定 */
@media (prefers-reduced-motion: reduce) {
  .card-thumb img { transition: none }
  .card:hover .card-thumb img { transform: none }
}
/* 印刷：メニュー・遊ぶ画面・いいね・広告は出さない */
@media print {
  .site-head, .play, .deco, .like-row, .ad, .ad-band, .preview-bar, .game-side, .feedback, .pc-only-note { display: none !important }
  body { background: #fff; color: #000 }
  .card, .page-head, .game-main, .article-layout, .prose, .hero-card { background: #fff !important; box-shadow: none; -webkit-mask: none; mask: none }
}
/* スマホの横持ち：遊ぶ画面が画面の高さを超え、「全画面で遊ぶ」が画面の外に出ていた→高さに収まる幅にする（両作品とも 16:9） */
@media (orientation: landscape) and (max-height: 500px) { .play-frame { max-width: calc((100dvh - 16px) * 16 / 9); margin-inline: auto } }
/* 大きい画面の全画面：右上のボタンが小さく見つけにくかった */
@media (min-width: 1800px) { .play-tools .btn { font-size: 1.05rem; padding: 9px 20px } }
/* 「こちらから」を途中で折り返さない */
.feedback a { white-space: nowrap }
/* 画面いっぱいに広げた時は、横持ちの高さ合わせ（max-width）を外して横幅いっぱいにする */
.play-frame.is-full { max-width: none; margin-inline: 0 }
/* スマホの縦持ちで遊べる作品の案内（縦持ちの指の端末だけに出す） */
.rotate-note { display: none; margin: 0 0 12px; padding: 8px 14px; border-radius: 6px; background: var(--paper-2); border: 1px solid var(--line); font-size: 0.875rem; color: var(--ink) }
@media (pointer: coarse) and (orientation: portrait) { .rotate-note { display: block } }
/* 3周目の点検の直し（2026-10-07） */
/* 広い画面の左右の飾り：絵の下端が真横に切れていた→高さを足し、下端を溶かす */
.deco { height: 980px; -webkit-mask-image: linear-gradient(#000 85%, transparent); mask-image: linear-gradient(#000 85%, transparent) }
:root[data-theme="dark"] .deco { filter: brightness(.75) }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .deco { filter: brightness(.75) } }
/* 狭い画面：関連カードの題が単語の途中で折れていた→絵を上に置いて文字の幅を取る。日本語の見出しは文節で折る */
@media (max-width: 340px) { .card, .shelf-guides .card { grid-template-columns: 1fr } .card-thumb { aspect-ratio: 16 / 9 } }
:is(h1, h2, .card-title):lang(ja) { word-break: auto-phrase }
/* フッター：指の端末でリンクに上下の余白が付くと、著作の表示が上にずれていた */
.site-foot { align-items: center }
/* 説明文の最後の行が短くならないように */
.hero-sum { text-wrap: pretty }
/* 指で押すもの：パンくず・ロゴも 44px 以上 */
@media (pointer: coarse) {
  .crumbs a, .logo { display: inline-flex; align-items: center; min-height: 44px }
}

/* 日本語の改行を文節の切れ目にそろえる（2026-10-07 Notion AI-1038）。build.mjs が文節の切れ目に <wbr> を入れるので、
   keep-all で <wbr>・空白・句読点の所だけ改行させる。入りきらない長い語は anywhere で折る（はみ出さない） */
body { word-break: keep-all; overflow-wrap: anywhere }
/* ただしページ本文の段落・箇条書きは、文節で切ると行の右が大きく空いて読みにくいので、日本語の普通の組み方（文字単位で折り返す）に戻す */
:is(.prose, .howto, .notes) :is(p:not(.like-row), li, dd, td) { word-break: normal }
/* 本文の段落は右端もそろえる（日本語の本文の普通の組み方） */
.prose p { text-align: justify }
/* 最後の行に1〜2文字だけ落ちる（「くださ｜い。」）のを避ける */
:is(.prose, .howto, .notes) :is(p, li) { text-wrap: pretty }

/* 横に流す棚（スマホ）のカードは次の1枚を覗かせる幅86%。1枚だけの棚（作品ページの「同じ棚のほかの作品」など）は右が空くので幅いっぱいに（2026-10-07 AI-1038） */
.shelf-row .card:only-child { flex-basis: 100% }

/* 中央揃えの紹介文は、各行の長さを均等にする（1行目だけ短くならないように。2026-10-07 AI-1038） */
.hero-sum { text-wrap: balance }

/* 2026-10-07 公開後の見直し（Notion AI-1038）：同じ高さにあるべき文字をそろえる */
/* PC：メニューのボタンが「サイト名＋説明文」のまとまりの中央に来て、サイト名の行より約12px下だった。ロゴ（40px）とボタン（約40px）を上でそろえる */
@media (min-width: 981px) { .head-in { align-items: flex-start } }
/* 棚の見出し：リボンと「すべて見る」を下揃えにしていて文字の中心が約7pxずれていた */
.shelf-head { align-items: center }
/* 足元のリンク・パンくずは押せる高さを24px以上に（PC で23px・19pxだった） */
.site-foot nav a, .crumbs a { display: inline-flex; align-items: center; min-height: 24px }
/* 幅980px以下：メニューの三本線のボタン（高さ約44px）を上でそろえていて、マウスの端末ではロゴの行（32px）より中心が約6px下だった。ボタンの大きさは変えず中心を合わせる。
   指の端末はロゴにも高さ44pxが付いて上端がそろい、もともと中心が合うので対象外（本番のスマホ幅で6px上へずれたのを測って直した） */
@media (max-width: 980px) and (pointer: fine) { .nav-toggle { margin-top: -6px; margin-bottom: -6px } }

/* 全画面の時のボタン：44px の丸いアイコン。名前の文字は読み上げ用に残して見た目からは隠す。
   ゲーム（TAMAYA!・UNDERBEAT とも 16:9）の絵の外の余白に置く。横長の画面は右の余白に縦に、縦長は上の余白に横に並べる（2026-10-07 AI-1038） */
.play-tools .btn { width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center }
.play-tools .btn svg { width: 22px; height: 22px }
.play-tools .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.play-tools [aria-pressed="true"] .ico-on, .play-tools [aria-pressed="false"] .ico-off { display: none }
@media (min-aspect-ratio: 16/9) {
  .play-tools { flex-direction: column; top: 10px; right: max(6px, calc((100vw - 100vh * 16 / 9) / 4 - 22px)) }
}
@media (max-aspect-ratio: 16/9) {
  .play-tools { top: max(6px, calc((100vh - 100vw * 9 / 16) / 4 - 22px)); right: 10px }
}
@media (min-width: 1800px) { .play-tools .btn { font-size: inherit; padding: 0 } }
/* 余白の無い全画面（app.js が tools-strip を付ける）：枠の右に60pxの帯を作り、丸いボタンはそこへ縦に */
.play-frame.tools-strip iframe { width: calc(100% - 60px) }
.play-frame.tools-strip .play-tools { flex-direction: column; top: 10px; right: 8px }