/* Gangsta Rap Atlas — 誌面っぽいチープなドット印刷の質感 */

:root {
  --paper: #e8e4d9;
  --paper-2: #dcd7c8;
  --ink: #14120f;
  --ink-2: #4a453c;
  --red: #c1272d;
  --gold: #b8912f;
  --dot: rgba(20,18,15,.18);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: var(--paper); color: var(--ink);
  font-family: "Helvetica Neue", Helvetica, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  -webkit-font-smoothing: none;
}

/* 紙のハーフトーン地 */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(var(--dot) 1px, transparent 1.2px);
  background-size: 4px 4px;
  opacity: .55;
}
/* 見出し用のドット網点 */
.halftone {
  background-image: radial-gradient(rgba(193,39,45,.55) 1.4px, transparent 1.6px);
  background-size: 5px 5px;
}

/* ---------- 見出し ---------- */
#topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  display: flex; align-items: stretch; gap: 0;
  border-bottom: 3px solid var(--ink);
  background: var(--paper);
}
.brand {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px; border-right: 3px solid var(--ink);
  background: var(--ink); color: var(--paper);
}
.brand-mark { font-size: 20px; color: var(--red); }
.brand h1 {
  margin: 0; font-size: 18px; font-weight: 900; letter-spacing: .18em;
  font-stretch: condensed;
}
.brand p { margin: 1px 0 0; font-size: 10px; letter-spacing: .12em; color: var(--paper-2); }
.brand { cursor: pointer; }
.brand:hover .brand-mark { transform: scale(1.1); }

/* 墓石アイコン(★の右)を押すとヘッダー右下にポップダウンする絞り込みパネル。
   以前はPC幅だけヘッダーに常時展開(display:contents)していたが、
   トークボックス/ネタモノの説明文を足すスペースが要るため、幅を問わず
   アイコンで開閉する方式に統一した。 */
.drawer {
  display: none;
  position: fixed; top: calc(var(--topbar-h, 58px) + 4px); right: 8px; left: auto; z-index: 35;
  max-width: 340px;
  background: var(--paper); border: 3px solid var(--ink);
  box-shadow: 6px 6px 0 rgba(20,18,15,.4);
}
body.stamps-open .drawer { display: block; }
.era-filter, .tag-filter {
  display: flex; gap: 8px 12px; align-items: center; flex-wrap: wrap;
  border-bottom: 2px solid var(--ink); padding: 10px;
}
.era-chk {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 900; letter-spacing: .06em;
  color: var(--ink-2); cursor: pointer; white-space: nowrap; user-select: none;
}
.era-chk input { accent-color: var(--ink); margin: 0; cursor: pointer; }
.era-chk.on { color: var(--ink); }
.era-chk .count { font-variant-numeric: tabular-nums; opacity: .65; font-weight: 700; margin-left: 1px; }

/* 自動再生(シャッフル・継ぎ足し)からの除外設定。
   見出し行の下にチェック行を一段下げて並べる */
.autoplay-filter { padding: 8px 10px 10px; border-bottom: 2px solid var(--ink); }
.autoplay-label {
  display: block; font-size: 11px; font-weight: 900; letter-spacing: .08em;
  color: var(--ink-2); margin-bottom: 6px;
}
.autoplay-chks { display: flex; flex-wrap: wrap; gap: 6px 12px; padding-left: 14px; }

/* イラナイ(シャッフル除外)マーク中のディスクカード: 消さずに薄く見せる */
.album.noped { opacity: .45; filter: grayscale(.7); }
.stamp-filter {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 10px 10px 6px; overflow: visible;
  border-bottom: 2px solid var(--ink);
}
.filter-hint {
  margin: 0; padding: 10px; font-size: 11px; line-height: 1.6; color: var(--ink-2);
  border-bottom: 2px solid var(--ink);
}
/* スタンプ/タグ/説明文は「みんなのスタンプ検索」のひとまとまり。
   グループ内の区切りは点線にして、説明文がタグまで掛かっていると分かるようにする */
.stamp-filter, .tag-filter { border-bottom: 2px dotted var(--ink-2); }
.filter-hint b { color: var(--ink); }
.drawer-actions:empty { display: none; }
.drawer-actions {
  display: flex; gap: 8px; align-items: center;
  padding: 10px;
}
.drawer-actions .fav-toggle { flex: 1; text-align: center; padding: 7px 10px; }

/* ---------- スタンプ(ゴム印っぽく) ---------- */
.stamp {
  display: inline-flex; align-items: center; gap: 4px;
  border: 2px solid currentColor; background: transparent;
  padding: 2px 8px; font-size: 11px; font-weight: 800; letter-spacing: .06em;
  cursor: pointer; color: var(--ink-2);
  transform: rotate(-1deg);
  transition: transform .1s steps(2), background .1s, color .1s;
}
.stamp:nth-child(even) { transform: rotate(1deg); }
.stamp:hover { transform: rotate(0) scale(1.05); }
.stamp .count { font-variant-numeric: tabular-nums; opacity: .65; font-weight: 700; }
.stamp.on { background: currentColor; }
.stamp.on span:not(.count) { color: var(--paper); }
.stamp.on .count { color: var(--paper); opacity: .9; }
.stamp.mine { box-shadow: 3px 3px 0 rgba(20,18,15,.35); }
span.stamp.mine { cursor: default; }

/* ---------- ステージ ---------- */
#stage { position: fixed; inset: 58px 0 74px 0; z-index: 1; }

/* 地図は常にフルスクリーンの背景 */
/* z-indexを持たせて独立したスタッキングコンテキストを作る。
   これが無いと、内側のマーカー(枚数ベースでz-index最大9999)の値が
   #mapWrapの外までそのまま漏れて、#list等のポップアップより
   手前に出てしまう(実際に発生した不具合)。 */
#mapWrap { position: absolute; inset: 0; overflow: hidden; z-index: 1; }
#map { position: absolute; inset: 0; }
/* 白黒印刷風フィルタはタイルのキャンバスだけに掛ける
 * (マーカーまで掛けると赤い弾痕が灰色になってしまう) */
#map .maplibregl-canvas { filter: grayscale(1) contrast(1.25); }

/* 地図の上にかぶせる印刷ノイズ */
#mapWrap::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(20,18,15,.35) 1px, transparent 1.1px);
  background-size: 3px 3px;
  mix-blend-mode: multiply;
}

/* ポップアップ表示中は背面の地図を触れなくするマスク */
#mask {
  position: fixed; inset: 0; z-index: 15;
  background: rgba(20,18,15,.35);
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
body.detail #mask { opacity: 1; pointer-events: auto; }

/* ---------- 検索ポップアップ ---------- */
.search-overlay {
  position: fixed; z-index: 30; inset: 0;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: calc(var(--topbar-h, 58px) + 20px);
  background: rgba(20,18,15,.5);
  opacity: 0; pointer-events: none; transition: opacity .18s;
}
.search-overlay.open { opacity: 1; pointer-events: auto; }
.search-box {
  position: relative; width: min(560px, 92vw); max-height: 76vh;
  background: var(--paper);
  background-image: radial-gradient(var(--dot) 1px, transparent 1.2px);
  background-size: 4px 4px;
  border: 3px solid var(--ink);
  box-shadow: 10px 10px 0 rgba(20,18,15,.5);
  padding: 16px; display: flex; flex-direction: column; gap: 10px;
}
.search-box input {
  font: inherit; font-size: 15px; padding: 10px 40px 10px 12px;
  border: 2px solid var(--ink); background: var(--paper); color: var(--ink);
}
/* ✕は検索窓(input)内の右端に枠なしで重ねる */
.search-box .close {
  position: absolute; top: 16px; right: 18px;
  width: 36px; height: 36px;
  border: none; background: transparent;
  color: var(--ink); font-size: 16px; font-weight: 900; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.search-box .close:hover { color: var(--red); }
.search-results { overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }

/* ---------- スタンプ選択ポップアップ ---------- */
.stamp-box {
  position: relative; width: min(420px, 92vw); max-height: 76vh;
  background: var(--paper);
  border: 3px solid var(--ink);
  box-shadow: 10px 10px 0 rgba(20,18,15,.5);
  padding: 16px; display: flex; flex-direction: column; gap: 12px;
}
.stamp-box-head {
  display: flex; align-items: center; gap: 12px;
  border-bottom: 2px solid var(--ink); padding-bottom: 10px;
}
.stamp-overlay-title { font-weight: 900; font-size: 15px; flex: 1; }
.stamp-box-head .close {
  border: none; background: transparent; color: var(--ink);
  font-size: 16px; font-weight: 900; cursor: pointer;
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
}
.stamp-box-head .close:hover { color: var(--red); }
.stamp-overlay-list { display: flex; flex-wrap: wrap; gap: 8px; overflow-y: auto; }
.stamp-overlay-list .stamp {
  font-size: 13px; padding: 10px 14px; min-height: 40px;
}
.stamp-overlay-tags {
  display: flex; gap: 16px; flex-wrap: wrap;
  border-top: 2px dashed var(--ink-2); padding-top: 12px;
}
.stamp-tag-chk {
  display: flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: 12px; font-weight: 800; letter-spacing: .04em; color: var(--ink-2);
}
.stamp-tag-chk.on { color: var(--ink); }
.stamp-tag-chk input { accent-color: var(--ink); margin: 0; cursor: pointer; }

.search-results .sr-item {
  display: flex; align-items: baseline; gap: 8px; padding: 8px 6px;
  cursor: pointer; border-bottom: 1px solid var(--dot);
  font-size: 12px;
}
.search-results .sr-item:hover { background: var(--paper-2); }
.search-results .sr-item .t { font-weight: 900; }
.search-results .sr-item .a { color: var(--red); }
.search-results .sr-item .y { color: var(--ink-2); white-space: nowrap; }
.search-results .sr-item .r { margin-left: auto; color: var(--ink-2); white-space: nowrap; }
.search-results .sr-empty { font-size: 12px; color: var(--ink-2); padding: 8px 6px; }

/* ---------- 弾痕マーカー ----------
 * 外側の .marker は MapLibre が transform で座標制御するため一切触らない。
 * 拡大縮小・ホバーは内側 .mk のスケールだけで行う(--s はズーム追従、--h はホバー)。 */
/* position は指定しない(MapLibre の .maplibregl-marker { position:absolute } を
 * 上書きするとピンが流れて座標がずれる) */
.marker { cursor: pointer; transition: opacity .3s; }
.marker .mk {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  transform: scale(calc(var(--s, 1) * var(--h, 1)));
}
.marker:hover { --h: 1.18; z-index: 9999 !important; }
/* 墓石ピン(中に枚数)。影・縁取りを焼き込んだ低解像度PNG(28x30px)を全マーカーで
 * 共有する。SVG+drop-shadowフィルタ×645個は描画が重かったための置き換えで、
 * 小さいビットマップを通常補間で拡大させることで「低画質画像を引き伸ばした」
 * ソフトな粗さ(ブート盤ジャケ的な質感)も同時に出す。 */
.marker .grave {
  position: absolute; inset: 0;
  background: url('assets/px/grave.png?v=2') center / contain no-repeat;
  transform: rotate(var(--rot, 0deg));
}
.marker .n {
  position: absolute; left: 50%; top: 52%;
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
  font-size: 11px; font-weight: 900; color: var(--paper);
}

/* 未確認情報(漂流ブイ)ピン */
.marker .buoy { background-image: url('assets/px/buoy.png?v=2'); }
.marker.unclassified .n { display: none; }
.marker .q {
  position: absolute; left: 50%; top: 44%;
  transform: translate(-50%, -50%);
  font-size: 12px; font-weight: 900; color: var(--paper);
}
/* 地名は密集地帯で潰れるので、寄ったときとホバー時だけ出す */
.marker .nm {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  margin-top: 4px; white-space: nowrap;
  font-size: 10px; font-weight: 900; letter-spacing: .1em;
  color: var(--ink);
  text-shadow: -1px -1px 0 var(--paper), 1px -1px 0 var(--paper), -1px 1px 0 var(--paper), 1px 1px 0 var(--paper);
  display: none; pointer-events: none;
}
body.zoomed-in .marker .nm, .marker:hover .nm { display: block; }
.marker.dimmed { opacity: .22; }
.marker.hidden { display: none; }

/* 一度撃った土地には弾痕が残る(墓石の背後) */
.marker .bh {
  position: absolute; inset: -95%;
  background: url('assets/bullet-ink.png') center / contain no-repeat;
  transform: rotate(var(--rot, 0deg)) translate(-4%, -3%);
  opacity: 0; transition: opacity .3s;
  pointer-events: none;
}
.marker.hit .bh { opacity: .95; }
.marker.hit .mk { animation: hit .3s steps(3); }
/* 直近で開いた地域は次に別の地域を選ぶまで赤いままにする
   (検索から来た時など、どこにピンが立っていたか一目でわかるように) */
.marker.selected .grave { background-image: url('assets/px/grave-red.png?v=2'); }
.marker.selected .buoy { background-image: url('assets/px/buoy-red.png?v=2'); }
@keyframes hit {
  0% { transform: scale(calc(var(--s, 1) * 2.4)); }
  100% { transform: scale(calc(var(--s, 1) * var(--h, 1))); }
}

/* ---------- 着弾エフェクト(クリック地点に弾痕→画面が揺れる) ---------- */
#shot {
  position: fixed; z-index: 40; width: 260px; height: 260px;
  margin: -130px 0 0 -130px; pointer-events: none; opacity: 0;
}
#shot img { width: 100%; height: 100%; display: block; }
#shot.fire { animation: shotIn .7s steps(5) forwards; }
@keyframes shotIn {
  0%   { opacity: 1; transform: scale(2.4); }
  30%  { opacity: 1; transform: scale(1); }
  85%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}
/* シェイクは地図だけに掛ける(#stage に transform を掛けると
 * 中の fixed 要素(ポップアップ・マスク・着弾)の座標系が壊れる) */
body.shake #mapWrap { animation: shake .3s steps(6); }
@keyframes shake {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-7px, 5px); }
  50% { transform: translate(6px, -4px); }
  75% { transform: translate(-3px, 2px); }
  100% { transform: translate(0, 0); }
}

/* ---------- 一覧ポップアップ(誌面が地図の上に飛び出す) ---------- */
#list {
  position: fixed; z-index: 20;
  top: calc(var(--topbar-h, 58px) + 10px); left: 26px; right: 26px; bottom: 92px;
  padding: 16px 20px 20px; overflow-y: auto;
  background: var(--paper);
  background-image: radial-gradient(var(--dot) 1px, transparent 1.2px);
  background-size: 4px 4px;
  border: 3px solid var(--ink);
  box-shadow: 10px 10px 0 rgba(20,18,15,.5);
  opacity: 0; pointer-events: none;
  transform: scale(.96) translateY(12px);
  transition: opacity .18s steps(3), transform .18s steps(3);
}
body.detail #list { opacity: 1; pointer-events: auto; transform: none; }

.list-head {
  display: flex; align-items: baseline; gap: 12px;
  border-bottom: 3px solid var(--ink); padding-bottom: 6px; margin-bottom: 14px;
  position: sticky; top: -16px; background: var(--paper); z-index: 2; padding-top: 4px;
}
.list-head h2 {
  margin: 0; font-size: 40px; font-weight: 900; letter-spacing: -.02em; line-height: .95;
  text-transform: uppercase;
}
.list-head .sub { font-size: 11px; letter-spacing: .16em; color: var(--ink-2); }
.list-head .cnt { margin-left: auto; font-size: 11px; letter-spacing: .1em; }
.list-head .close {
  align-self: center; flex: 0 0 auto;
  width: 34px; height: 34px; border: 2px solid var(--ink);
  background: var(--paper); color: var(--ink); font-size: 14px; font-weight: 900; cursor: pointer;
}
.list-head .close:hover { background: var(--red); border-color: var(--red); color: var(--paper); }
.list-head .share, .list-head .region-shuffle {
  align-self: center; flex: 0 0 auto;
  width: 34px; height: 34px; border: 2px solid var(--ink);
  background: var(--paper); color: var(--ink); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.list-head .share:hover, .list-head .region-shuffle:hover { background: var(--ink); color: var(--paper); }

/* 共有リンクをコピーしたときの簡易トースト */
.share-toast {
  position: fixed; left: 50%; bottom: 96px; z-index: 60;
  transform: translate(-50%, 8px); opacity: 0; transition: opacity .25s, transform .25s;
  background: var(--ink); color: var(--paper);
  padding: 8px 16px; font-size: 12px; font-weight: 900; letter-spacing: .08em;
  border: 2px solid var(--paper); pointer-events: none; white-space: nowrap;
}
.share-toast.show { opacity: 1; transform: translate(-50%, 0); }

.intro {
  position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%);
  z-index: 5; text-align: center; transition: opacity .3s;
}
body.detail .intro { opacity: 0; pointer-events: none; }
.intro p {
  display: inline-block; margin: 0;
  background: var(--ink); color: var(--paper);
  font-size: 12px; letter-spacing: .2em; padding: 6px 16px;
}

/* ---------- ディスク(1カード=CD1枚) ---------- */
/* 画面幅に応じて段数が増える段組(開閉で高さが違ってもきれいに詰まる) */
.grid { columns: 350px; column-gap: 14px; }
.album {
  border: 3px solid var(--ink); background: var(--paper);
  padding: 10px; box-shadow: 5px 5px 0 rgba(20,18,15,.3);
  break-inside: avoid; margin-bottom: 14px;
}
.album-head { display: flex; gap: 10px; align-items: stretch; }
/* 閉:箱の縦幅いっぱいに引き伸ばした窓 / 開:フル幅の大ジャケ
 * 画像は absolute で窓に流し込む(窓自体の高さ計算に影響させないため) */
.album-art {
  position: relative; display: grid; place-items: center; text-align: center;
  flex: 0 0 auto; width: 128px; min-height: 118px; align-self: stretch;
  border: 2px solid var(--ink); overflow: hidden;
  font-size: 9px; font-weight: 900; letter-spacing: .14em; line-height: 1.9;
  color: var(--ink-2); cursor: pointer;
  background-image: radial-gradient(var(--dot) 1.2px, transparent 1.4px);
  background-size: 5px 5px;
}
.album { cursor: pointer; }
.album:hover { box-shadow: 7px 7px 0 rgba(20,18,15,.45); }

/* ---------- ディスク専用ページ ---------- */
.disc { display: flex; gap: 18px; margin-bottom: 4px; flex-wrap: wrap; }
.disc-art {
  position: relative; width: min(340px, 44%); min-width: 220px; aspect-ratio: 1;
  border: 3px solid var(--ink); flex: 0 0 auto;
  display: grid; place-items: center; text-align: center;
  font-size: 11px; font-weight: 900; letter-spacing: .18em; line-height: 2; color: var(--ink-2);
  background-image: radial-gradient(var(--dot) 1.2px, transparent 1.4px);
  background-size: 5px 5px;
  box-shadow: 6px 6px 0 rgba(20,18,15,.3);
}
.disc-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.disc-side { flex: 1; min-width: 240px; }
.disc-side .m { margin: 2px 0 0; font-size: 12px; letter-spacing: .06em; color: var(--ink-2); }
.disc-side .apple { color: var(--ink-2); }
.disc-actions { display: flex; gap: 8px; margin: 12px 0; }
.disc-actions .tr-toggle { font-size: 12px; padding: 6px 12px; margin-top: 0; }
/* ▶はテキストボタン3つと並ぶと60pxではこぢんまりするので長めにする */
.disc-actions .disc-play { width: 120px; }
.list-head .back { margin-right: 4px; }

/* ---------- 投稿フォーム ---------- */
.submit-form { max-width: 560px; display: flex; flex-direction: column; gap: 10px; }
.submit-form label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 11px; font-weight: 800; letter-spacing: .1em; color: var(--ink-2);
}
.submit-form input, .submit-form select, .submit-form textarea {
  border: 2px solid var(--ink); background: var(--paper); color: var(--ink);
  font: inherit; font-size: 14px; padding: 7px 9px;
}
.submit-form input:focus, .submit-form select:focus, .submit-form textarea:focus {
  outline: 2px solid var(--red); outline-offset: -2px;
}
.submit-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.submit-form .send { align-self: flex-start; font-size: 13px; padding: 8px 22px; }
.submit-form .form-msg { margin: 0; font-size: 12px; font-weight: 800; color: var(--red); min-height: 1em; }
.submit-form .form-note { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .06em; color: var(--red); }
.fTags { display: flex; gap: 14px; }
.fTag {
  display: flex !important; flex-direction: row !important; align-items: center; gap: 6px;
  font-size: 12px; letter-spacing: .04em; color: var(--ink); cursor: pointer;
}
.fTag input { accent-color: var(--ink); margin: 0; cursor: pointer; }
.album-art.has-img { background: none; }
.album-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.92) contrast(1.04); }
.album-info { flex: 1; min-width: 0; }
.album-info .apple { color: var(--ink-2); }
.tr-toggle {
  margin-top: 6px; border: 1px solid var(--ink); background: transparent;
  font-size: 10px; font-weight: 800; letter-spacing: .08em; padding: 2px 8px; cursor: pointer;
}
.tr-toggle:hover { background: var(--ink); color: var(--paper); }
.album .tracks { display: none; }
.album.open .tracks { display: block; }
.album-info .t { margin: 0; font-size: 15px; font-weight: 900; line-height: 1.15; }
.album-info .a { margin: 2px 0 0; font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--red); text-transform: uppercase; }
.album-info .m { margin: 3px 0 0; font-size: 10px; letter-spacing: .06em; color: var(--ink-2); }
.album-actions { display: flex; align-items: stretch; gap: 6px; margin-top: 8px; }
.play-btn {
  flex: 0 0 auto; width: 60px; border: 2px solid var(--ink);
  background: var(--ink); color: var(--paper); cursor: pointer; font-size: 11px;
}
.play-btn:hover { background: var(--paper); color: var(--ink); }

/* 持ってる/ほしい の2ボタン */
.fav-pair { display: flex; flex-direction: row; gap: 6px; flex: 0 0 auto; }
.fav-btn {
  border: 2px solid var(--ink); background: var(--paper); color: var(--ink);
  cursor: pointer; font-size: 9px; font-weight: 800; letter-spacing: .04em;
  padding: 4px 8px; line-height: 1.3;
}
.fav-btn:hover { background: var(--ink); color: var(--paper); }
.fav-btn.have-btn.on { background: var(--gold); border-color: var(--ink); color: var(--ink); }
.fav-btn.want-btn.on { background: var(--red); border-color: var(--red); color: var(--paper); }
.fav-btn.nope-btn.on { background: #6b6b6b; border-color: #6b6b6b; color: var(--paper); }

/* 2行目は「▶ 今すぐ再生」+「＋ キューニ追加」の2カラムで幅いっぱいに使う */
.album-actions.play-row { margin-top: 6px; }
.album-actions.play-row .play-btn { flex: 1; width: auto; padding: 5px 0; }
.album-actions.play-row .enqueue-btn {
  flex: 1; border: 2px solid var(--ink); background: var(--paper); color: var(--ink);
  cursor: pointer; font-size: 11px; font-weight: 800; letter-spacing: .04em; padding: 5px 0;
}
.album-actions.play-row .enqueue-btn:hover { background: var(--ink); color: var(--paper); }

.disc-actions .have-d.on { background: var(--gold); }
.disc-actions .want-d.on { background: var(--red); color: var(--paper); border-color: var(--red); }
.disc-actions .nope-d.on { background: #6b6b6b; color: var(--paper); border-color: #6b6b6b; }

/* お気に入りページ: Street Name同期(アコーディオン) */
.street-sync {
  border: 2px solid var(--ink); background: var(--paper);
  padding: 10px 12px; margin: 14px 0;
}
.street-sync summary { cursor: pointer; list-style: none; }
.street-sync summary::-webkit-details-marker { display: none; }
.street-sync-caret { margin-left: auto; font-size: 10px; transition: transform .15s; }
.street-sync[open] .street-sync-caret { transform: rotate(180deg); }
.street-sync-body { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.street-sync-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.street-sync .lab { font-size: 10px; font-weight: 800; letter-spacing: .1em; color: var(--ink-2); }
.street-name-val { font-size: 14px; font-weight: 900; letter-spacing: .04em; }
.street-sync-hint { margin: 0; font-size: 10px; color: var(--ink-2); }
.street-sync input[type="text"] {
  border: 2px solid var(--ink); background: var(--paper); color: var(--ink);
  font: inherit; font-size: 12px; padding: 5px 8px; flex: 1; min-width: 140px;
  text-transform: uppercase;
}
.street-sync .form-msg { margin: 0; font-size: 11px; font-weight: 800; color: var(--red); }

/* お気に入りページ: 持ってる/ほしい セクション + CSV入出力 */
.fav-io { display: flex; align-items: center; gap: 10px; margin: 12px 0; flex-wrap: wrap; }
.fav-io .form-msg { margin: 0; font-size: 11px; font-weight: 800; color: var(--red); }
.fav-section { margin-top: 18px; }
.fav-section h3 {
  margin: 0 0 10px; font-size: 16px; font-weight: 900; letter-spacing: .04em;
  border-bottom: 2px solid var(--ink); padding-bottom: 6px;
}
.fav-section h3 .cnt { font-size: 11px; font-weight: 700; color: var(--ink-2); letter-spacing: .08em; }
.fav-tabs { display: flex; gap: 6px; margin-top: 14px; border-bottom: 2px solid var(--ink); }
.fav-tab {
  flex: 1; border: 2px solid var(--ink); border-bottom: none; background: var(--paper-2);
  color: var(--ink-2); font-weight: 800; font-size: 12px; letter-spacing: .04em;
  padding: 8px 6px; cursor: pointer; transform: translateY(2px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fav-tab .cnt { font-size: 10px; font-weight: 700; opacity: .7; }
.fav-tab.on { background: var(--paper); color: var(--ink); transform: translateY(0); }
.fav-tab:hover { color: var(--ink); }
.fav-section[data-tab] { margin-top: 14px; }
.fav-sort {
  display: flex; align-items: center; gap: 6px; margin-top: 10px;
  font-size: 11px; font-weight: 800; letter-spacing: .04em; color: var(--ink-2);
}
.fav-sort select {
  font: inherit; font-size: 12px; border: 2px solid var(--ink);
  background: var(--paper); color: var(--ink); padding: 3px 6px;
}
.fav-group-heading {
  margin: 16px 0 6px; font-size: 14px; font-weight: 900; letter-spacing: .04em;
  color: var(--ink); border-bottom: 1px solid var(--dot); padding-bottom: 4px;
  break-inside: avoid;
}
.grid > .fav-group-heading:first-child { margin-top: 0; }

.top-actions {
  display: flex; align-items: center; gap: 8px;
  /* .drawerがposition:fixedになりフレックス配置から抜けたので、
     ヘッダー右寄せの役目はこちらのmargin-left:autoが担う */
  margin-left: auto;
  padding-right: 14px; flex: 0 0 auto; align-self: center;
}
.fav-toggle {
  border: 2px solid var(--gold); background: transparent; color: var(--ink);
  font-size: 12px; font-weight: 900; letter-spacing: .08em; padding: 4px 10px; cursor: pointer;
}
.fav-toggle.lang { border-color: var(--ink); }
.fav-toggle.search { border-color: var(--ink); display: flex; align-items: center; padding: 5px 9px; }

/* 墓石メニュー(絞り込みパネルの開閉。PC/モバイル共通で★の右に置く) */
.stamp-menu-btn {
  display: block; border: 2px solid var(--ink); background: transparent; color: var(--ink);
  width: 34px; height: 34px; padding: 4px; cursor: pointer; flex: 0 0 auto;
}
/* ドロワーが実際に開いている時の状態表示はホバーと切り離す(タッチ端末で
   タップ後もホバー相当の見た目が残り続ける不具合とは無関係にしたいため) */
body.stamps-open .stamp-menu-btn { background: var(--ink); color: var(--paper); }
/* :hoverはマウス等ポインターデバイスでのみ有効にする。タッチ端末だと
   タップ後も:hoverが残り続け、ボタンが「押しっぱなし」に見えてしまうため */
@media (hover: hover) and (pointer: fine) {
  .fav-toggle:hover { background: var(--gold); }
  .fav-toggle.lang:hover { background: var(--ink); color: var(--paper); }
  .fav-toggle.search:hover { background: var(--ink); color: var(--paper); }
  .stamp-menu-btn:hover { background: var(--ink); color: var(--paper); }
}

.rarity { display: flex; align-items: center; gap: 8px; margin: 9px 0 7px; font-size: 10px; letter-spacing: .08em; }
.rarity .lab { font-weight: 900; color: var(--red); white-space: nowrap; }
.rarity .bar { flex: 1; height: 6px; border: 2px solid var(--ink); }
.rarity .bar i { display: block; height: 100%; background: var(--red); }
.rarity .n { color: var(--ink-2); white-space: nowrap; }
.hot-badge { display: inline-block; margin-left: 4px; padding: 1px 5px; background: var(--red); color: var(--paper); font-weight: 900; border-radius: 3px; white-space: nowrap; }

/* 1行固定・スクロールバー非表示の横スクロール */
.album-stamps {
  display: flex; flex-wrap: nowrap; gap: 4px;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
}
.album-stamps::-webkit-scrollbar { display: none; }
.album-stamps > * { flex: 0 0 auto; }
.stamp.agg { cursor: default; }
.stamp.agg:hover { transform: rotate(-1deg); }

/* ---------- 収録曲(曲単位スタンプ) ---------- */
.tracks { margin-top: 8px; border-top: 2px solid var(--ink); padding-top: 6px; }
.tracks:empty { display: none; }

/* ---------- 同じアーティストの他のアルバム ---------- */
.other-albums:empty { display: none; }
.other-albums h3 {
  margin: 18px 0 8px; font-size: 13px; font-weight: 900; letter-spacing: .04em;
  border-top: 2px solid var(--ink); padding-top: 12px;
}
.other-albums-list { display: flex; flex-direction: column; gap: 2px; }
.other-album-row {
  display: flex; align-items: baseline; gap: 10px; width: 100%;
  border: none; background: transparent; cursor: pointer; text-align: left;
  padding: 6px 4px; font: inherit; color: var(--ink);
}
.other-album-row:hover { background: var(--paper-2); }
.other-album-row .t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; font-size: 13px; }
.other-album-row .y { font-size: 11px; color: var(--ink-2); }
.other-album-row .rgn { font-size: 11px; color: var(--ink-2); white-space: nowrap; }
.track { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 14px; }
.track .tp {
  flex: 0 0 auto; width: 26px; height: 26px; border: 1px solid var(--ink);
  background: transparent; cursor: pointer; font-size: 11px; padding: 0;
}
.track .tp:hover { background: var(--ink); color: var(--paper); }
.track .no { color: var(--ink-2); font-size: 12px; letter-spacing: .05em; }
.track .name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.track .tag-badges { display: flex; gap: 3px; flex: 0 0 auto; }
.track .tag-badges:empty { display: none; }
.tag-badge {
  display: flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border: 1px solid var(--ink-2); color: var(--ink-2);
  font-size: 10px; font-weight: 900; font-style: normal;
}
.tag-badge.mine { border-color: var(--ink); color: var(--ink); background: var(--paper-2); }
.track .stamp-slot {
  flex: 0 0 auto; border: 1px dashed var(--ink-2); border-radius: 0;
  background: transparent; color: var(--ink-2); cursor: pointer;
  font-size: 12px; font-weight: 800; letter-spacing: .04em;
  min-width: 32px; height: 28px; padding: 0 10px;
}
.track .stamp-slot:hover { border-style: solid; color: var(--ink); }
.track .stamp-slot.set { border-style: solid; border-color: currentColor; }
.track.yt-full { margin-top: 4px; padding-top: 6px; border-top: 1px dashed var(--ink-2); }
.track.yt-full a { color: var(--ink-2); font-size: 10px; letter-spacing: .03em; text-decoration: underline; }
.track.yt-full a:hover { color: var(--ink); }

/* ---------- プレイヤー ---------- */
.player {
  position: fixed; left: 0; right: 0; bottom: 0; height: 74px; z-index: 30;
  display: flex; align-items: center; gap: 18px; padding: 0 16px;
  background: var(--ink); color: var(--paper); border-top: 3px solid var(--red);
}
.player-now { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; cursor: pointer; }
.player-art {
  width: 44px; height: 44px; flex: 0 0 auto; border: 2px solid var(--paper-2);
  display: grid; place-items: center; color: var(--paper-2);
}
.player-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.player-queue .credit { opacity: .6; font-size: 9px; }
.player-meta { min-width: 0; }
.player-meta strong { display: block; font-size: 14px; font-weight: 900; }
/* 曲名が入りきらない時だけ、等速でスライドして後半を見せる
   (タイミング制御はJS側のupdateTitleMarquee()がtransformを直接操作する) */
.player-meta strong.scroll-box { overflow: hidden; white-space: nowrap; }
/* .scroll-innerもspanなので、下の.player-meta spanルール(#playerArtist用に
   font-size:10pxを敷いている)に食われないよう明示的に上書きする */
.player-meta strong .scroll-inner { display: inline-block; font-size: inherit; }
.player-meta span { display: block; font-size: 10px; letter-spacing: .08em; color: var(--paper-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-controls { display: flex; align-items: center; gap: 8px; }
.player-queue { display: flex; align-items: center; gap: 10px; font-size: 10px; letter-spacing: .1em; color: var(--paper-2); }

.icon-btn {
  background: transparent; border: 2px solid var(--paper-2); color: var(--paper);
  width: 32px; height: 32px; cursor: pointer; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
}
.icon-btn.play { width: 40px; height: 40px; border-color: var(--red); color: var(--red); font-size: 14px; }
@media (hover: hover) and (pointer: fine) {
  .icon-btn:hover { background: var(--red); border-color: var(--red); }
  .icon-btn.play:hover { background: var(--red); color: var(--paper); }
}
.text-btn { background: none; border: none; color: var(--paper-2); cursor: pointer; font-size: 10px; text-decoration: underline; letter-spacing: .08em; }
.yt-host { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* 投稿・言語ボタンはJS(placeActionButtons)がドロワー下部へ移すまでの間、
   ヘッダー上に一瞬表示されてしまう(FOUC)のを防ぐ。PC/モバイル共通で
   常にドロワーへ移すので、この非表示ルールも幅を問わず適用する。
   JSが移動すると.top-actionsの子ではなくなるので対象から自然に外れる */
.top-actions #submitBtn, .top-actions #langBtn { display: none; }

/* 狭い画面: スタンプ列は墓石メニューからのドロップダウンに切り替え */
@media (max-width: 860px) {
  .top-actions { gap: 6px; padding: 5px 10px; }
  /* 検索ボタンはヘッダー右下に独立配置(✕ボタンと被りやすいので
     詳細ページ・一覧が開いている間は隠す) */
  .fav-toggle.search {
    position: absolute; right: 10px; top: calc(100% + 8px); z-index: 29;
    background: var(--paper);
  }
  body.detail .fav-toggle.search, body.search-open .fav-toggle.search { display: none; }
  .drawer-actions { border-top: 2px solid var(--ink); }
  #list { top: calc(var(--topbar-h, 58px) + 6px); left: 8px; right: 8px; bottom: 84px; padding: 12px; }
  /* スマホ: 1行目=都市名(+右上の閉じる) / 2行目=州名+DISCS数 */
  .list-head { flex-wrap: wrap; gap: 2px 12px; }
  .list-head h2 { font-size: 26px; flex: 0 0 100%; padding-right: 122px; }
  .list-head .close { position: absolute; right: 0; top: 6px; }
  .list-head .share { position: absolute; right: 40px; top: 6px; }
  .list-head .region-shuffle { position: absolute; right: 80px; top: 6px; }
  .list-head .cnt { margin-left: 0; }
  .player-queue .credit { display: none; }
  /* 曲数とクリアを縦積みにして横幅を圧縮し、その分を曲名/アーティスト名に回す */
  .player-queue { flex-direction: column; align-items: center; gap: 1px; flex: 0 0 auto; }
  .player { gap: 8px; padding: 0 10px; }
  .player-now { gap: 8px; flex: 1 1 auto; }
  .player-meta { flex: 1 1 auto; min-width: 0; }
  .player-controls { flex: 0 0 auto; gap: 6px; }
}