:root{
  --icon-size: 76px;   /* 76×76固定 */
  --gap: 4px;          /* 画像間隔 */
  --side-pad: 2px;     /* 行の両サイド余白 */
  --filter-btn: 56px;  /* フィルタ/基準ボタン幅 */
  --max-width: 800px; /* コンテンツ最大幅 */
  color-scheme: light dark;
}
*{ box-sizing:border-box; }
html,body{
  margin:0; background:#f7f7f7;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,Meiryo,sans-serif;
  color:#111;
}
a{ color:#1565c0; text-decoration:none; }
a:hover{ text-decoration:underline; }

header{ padding:12px; }
.topbar{
  max-width:var(--max-width);
  margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.backlink{ font-weight:600; }

.bulk-actions{ display:flex; align-items:center; gap:8px; }
.bulk-gap{ width: calc(var(--filter-btn) + 4px); }
.bulk-btn{
  padding:6px 10px; border-radius:10px;
  border:1px solid #1976d2; background:#1976d2; color:#fff; cursor:pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  line-height: 1;
}
.bulk-btn.ghost{ background:#fff; color:#1976d2; }
.bulk-btn.share{
  background:#fff; color:#1976d2; border:1px solid #1976d2;
  display:flex; align-items:center; justify-content:center; gap:4px;
}
.bulk-btn:active{ transform:translateY(1px); }

h1{ margin:8px auto 12px; text-align:center; font-size:clamp(18px,3.5vw,28px); font-weight:800; }

.filters{ max-width:var(--max-width); margin:0 auto 12px; display:grid; gap:8px; }
.filter-row{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr);
  gap:8px; align-items:center; justify-items:center; padding:0 var(--side-pad);
}
.filter-btn{
  width:var(--filter-btn); height:var(--filter-btn);
  border:0; background:transparent; padding:0;
  border-radius:12px; overflow:hidden; display:grid; place-items:center;
  cursor:pointer; outline-offset:4px;
}
.filter-btn img{ width:100%; height:100%; display:block; user-select:none; -webkit-user-drag:none; }
.filter-btn[data-active="true"]{ outline:3px solid #1976d2; box-shadow:0 0 0 2px #fff inset; }

main{ max-width:var(--max-width); margin:0 auto; padding:0 0 24px; }
.grid-wrap{ padding:0 var(--side-pad); }

/* 76×76固定セルで左詰め（iOSズレ防止） */
.grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, var(--icon-size));
  grid-auto-rows: var(--icon-size);
  gap: var(--gap);
  justify-content:flex-start; align-content:start;
}

/* キャラセル（ボタン既定スタイル無効化でズレを防止） */
.chara{
  width:var(--icon-size); height:var(--icon-size);
  position:relative; border-radius:10px; overflow:hidden; background:#ddd;
  cursor:pointer; outline-offset:4px;
  appearance:none; -webkit-appearance:none; border:0; padding:0; display:block; line-height:0;
}
/* 画像は拡大縮小しない */
.chara img{
  width:76px; height:76px; display:block;
  image-rendering:auto; -webkit-user-drag:none; user-select:none;
}

/* 非選択は暗くする（黒オーバーレイ） */
.chara::after{ content:""; position:absolute; inset:0; background:transparent; transition:background .12s ease; }
.chara[data-owned="false"]::after{ background:rgba(0,0,0,.5); }

/* PC向けホバー名ラベル */
.chara .label{
  position:absolute; left:0; right:0; bottom:0;
  font-size:11px; line-height:1.2; text-align:center; color:#fff;
  background:rgba(0,0,0,.35);
  padding:2px 3px; opacity:0; transition:opacity .12s ease; pointer-events:none;
  white-space:nowrap; text-overflow:ellipsis; overflow:hidden;
}
.chara:hover .label{ opacity:1; }

footer{
  margin-top:24px; padding:16px; border-top:1px solid #ddd;
  font-size:12px; color:#555;
}
.footer-inner{
  max-width:var(--max-width); margin:0 auto;
  display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:space-between;
}

/* モバイル：広告の∧とサイトUIが重ならないように物理的な余白を作る */
@media (hover: none) and (pointer: coarse) {
  .filters::before {
    content: "";
    display: block;
    height: 28px;            /* 24〜36pxで微調整可 */
    pointer-events: none;    /* 余白自身はタップを奪わない */
  }
}