/* v16 — 紋章の質感・レア度・条件の目盛り・獲得演出・動き
 *
 * index.html で v2.css の後ろに直接読み込む。fixes.css の @import 連鎖より後に来るので、
 * 詳細度を上げたり !important を足したりせずに確実に効く。
 *
 * 前提：v13.css にあった `.badge-emblem{box-shadow:none!important;filter:saturate(.82)}` は
 * 削除済み。あの行が、レア度の金縁・内側の彫り・legend の発光をまとめて無効化していた。
 */

/* ── 素材感 ──────────────────────────────────────────────
   上から光が当たり、下に落ちる。印刷物ではなく金属の記章として読ませる。 */
.badge-emblem{
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.55),
    inset 0 -2px 4px rgba(0,0,0,.28),
    inset 0 0 0 1.5px rgba(255,255,255,.22),
    0 3px 7px -2px rgba(20,16,10,.45);
}
.badge-emblem::after{
  content:"";position:absolute;inset:0;z-index:5;pointer-events:none;border-radius:inherit;
  background:
    radial-gradient(72% 56% at 28% 16%, rgba(255,255,255,.42), transparent 62%),
    radial-gradient(64% 64% at 78% 96%, rgba(0,0,0,.26), transparent 60%);
}
/* 未獲得は沈ませる。獲得済みとの差を明度でも作る */
.badge-card.locked .badge-emblem{filter:saturate(.5) brightness(.86)}

/* ── レア度 ──────────────────────────────────────────────
   common は素、rare は白の二重縁、epic は銀の削り出し、legend は金箔と発光。 */
.badge-emblem.rank-common::before{
  content:"";position:absolute;z-index:6;inset:3px;border-radius:inherit;pointer-events:none;
  border:1px solid rgba(255,255,255,.3);
}
.badge-emblem.rank-rare::before{
  border:1px solid rgba(255,255,255,.85);
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.16);
}
.badge-emblem.rank-epic::before{
  border:0;inset:1px;
  background:conic-gradient(from 210deg,
    #fff 0deg,#b9c6d6 42deg,#7d8ea6 96deg,#e9eef5 150deg,
    #8e9db3 214deg,#f2f5f9 280deg,#9fb0c6 330deg,#fff 360deg);
  -webkit-mask:radial-gradient(closest-side,transparent calc(100% - 3.5px),#000 calc(100% - 3.5px));
  mask:radial-gradient(closest-side,transparent calc(100% - 3.5px),#000 calc(100% - 3.5px));
}
.badge-emblem.rank-legend{
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.5),
    inset 0 -2px 5px rgba(60,36,0,.4),
    0 0 0 1px #8a6410,
    0 0 14px -2px rgba(233,189,63,.75),
    0 4px 9px -3px rgba(60,40,0,.5);
}
.badge-emblem.rank-legend::before{
  border:0;inset:1px;
  background:conic-gradient(from 200deg,
    #fff3c4 0deg,#e9bd3f 40deg,#a97c12 92deg,#ffe9a8 148deg,
    #c8901c 208deg,#fff6d6 268deg,#d8a52a 322deg,#fff3c4 360deg);
  -webkit-mask:radial-gradient(closest-side,transparent calc(100% - 4px),#000 calc(100% - 4px));
  mask:radial-gradient(closest-side,transparent calc(100% - 4px),#000 calc(100% - 4px));
}

/* ── 条件の目盛り ────────────────────────────────────────
   本数は乱数ではなく達成条件そのもの。3県なら3本、10日連続なら10本。
   距離だけは数でなく量なので、計器として24等分に固定している（badgePips 参照）。 */
.badge-emblem .emblem-pips{
  position:absolute;inset:1.5px;z-index:4;border-radius:inherit;pointer-events:none;
  background:repeating-conic-gradient(from -90deg,
    rgba(255,255,255,.98) 0deg 4.4deg,
    transparent 4.4deg calc(360deg / var(--pips)));
  -webkit-mask:radial-gradient(closest-side,transparent calc(100% - 6px),#000 calc(100% - 6px));
  mask:radial-gradient(closest-side,transparent calc(100% - 6px),#000 calc(100% - 6px));
  filter:drop-shadow(0 0 1px rgba(0,0,0,.45));
}
.badge-emblem.has-pips .emblem-orbit{opacity:.32}
/* 目盛りは縁を一周するので、下端の微小ラベルと重なる。
   ラベルを目盛りより前面に出し、影で地から浮かせて可読性を確保する。 */
.badge-emblem.has-pips em{z-index:7;text-shadow:0 0 3px rgba(8,14,25,.9),0 1px 2px rgba(8,14,25,.8)}
.badge-emblem.has-pips strong,.badge-emblem.has-pips small{z-index:7}

/* ── 図鑑の動き ──────────────────────────────────────────
   カードは上から順に立ち上がる。 */
@keyframes bb-card-in{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.badge-card{
  animation:bb-card-in .34s ease both;
  animation-delay:calc(var(--i,0) * 22ms);
  transition:transform .16s ease,box-shadow .16s ease;
}
.badge-card:active{transform:scale(.97)}

/* 獲得済みの legend だけ、ときどき光が走る。
   要素を足さず、素材感の ::after に光の層を1枚重ねて位置だけ動かす。
   .emblem-detail は日付カテゴリが既に使っており、秘密の日付バッジは legend なので流用できない。 */
@keyframes bb-sheen{
  0%,68%{background-position:-140% 0,0 0,0 0}
  100%{background-position:140% 0,0 0,0 0}
}
.badge-card.earned .badge-emblem.rank-legend::after{
  background:
    linear-gradient(105deg,transparent 38%,rgba(255,255,255,.72) 50%,transparent 62%),
    radial-gradient(72% 56% at 28% 16%, rgba(255,255,255,.42), transparent 62%),
    radial-gradient(64% 64% at 78% 96%, rgba(0,0,0,.26), transparent 60%);
  background-size:240% 100%,100% 100%,100% 100%;
  background-repeat:no-repeat;
  animation:bb-sheen 4.6s ease-in-out infinite;
}

/* 進捗バーは値まで伸びる */
.mini-bar span{transition:width .5s cubic-bezier(.2,.8,.25,1)}

/* 日本地図は塗られた県が滲み出る */
@keyframes bb-fill{from{opacity:0}to{opacity:1}}
.real-japan-map .pref-path{transition:fill .45s ease,opacity .45s ease}
.real-japan-map .pref-path.visited{animation:bb-fill .55s ease both}
.real-japan-map .pref-path{cursor:pointer}

/* ── 獲得カード ──────────────────────────────────────────
   伏せた紋章が回って開く。複数同時なら1枚ずつ送る。 */
.earn-dialog{
  border:0;padding:0;background:transparent;max-width:340px;width:calc(100% - 40px);
}
.earn-dialog::backdrop{background:rgba(12,14,18,.72);backdrop-filter:blur(3px)}
.earn-body{
  background:var(--card,#fff);border-radius:26px;padding:26px 22px 20px;
  display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;
  box-shadow:0 26px 60px -20px rgba(12,14,18,.6);
  animation:bb-card-in .3s ease both;
}
.earn-eyebrow{
  margin:0;display:flex;gap:10px;align-items:center;
  font-size:10px;font-weight:900;letter-spacing:.22em;color:var(--muted,#6b7280);
}
.earn-eyebrow span{font-variant-numeric:tabular-nums}
.earn-stage{width:136px;height:136px;display:grid;place-items:center;position:relative;margin:2px 0 4px}
.earn-art{display:grid;place-items:center}
.earn-stage .badge-emblem{
  width:108px;height:108px;flex-basis:108px;border-radius:35px;
}
.earn-stage .badge-emblem strong{font-size:13px;left:14px;top:14px;max-width:62px;padding:4px 7px;border-radius:8px}
.earn-stage .badge-emblem em{font-size:9px;bottom:11px;letter-spacing:1.6px}
.earn-stage .badge-emblem small{font-size:11px;top:14px;right:14px;padding:3px 5px;border-radius:5px}
.earn-stage .badge-emblem .emblem-pictogram{width:46px;height:46px}
.earn-stage .badge-emblem .emblem-prefecture{width:64px;height:64px}
.earn-stage .badge-emblem .emblem-pips{
  inset:4px;
  -webkit-mask:radial-gradient(closest-side,transparent calc(100% - 11px),#000 calc(100% - 11px));
  mask:radial-gradient(closest-side,transparent calc(100% - 11px),#000 calc(100% - 11px));
}
.earn-stage.play .badge-emblem{animation:bb-mint .95s cubic-bezier(.2,.9,.25,1) both}
.earn-stage.play::after{
  content:"";position:absolute;inset:-6px;border-radius:44px;
  border:2px solid #e9bd3f;animation:bb-ring .95s ease-out both;
}
@keyframes bb-mint{
  0%{transform:rotateY(90deg) scale(.6);opacity:0;filter:brightness(1.7)}
  55%{transform:rotateY(-9deg) scale(1.07);opacity:1;filter:brightness(1.1)}
  100%{transform:rotateY(0) scale(1);opacity:1;filter:none}
}
@keyframes bb-ring{
  0%{transform:scale(.62);opacity:0}
  30%{opacity:.95}
  100%{transform:scale(1.5);opacity:0}
}
.earn-dialog h2{margin:0;font-size:21px;line-height:1.35;letter-spacing:-.01em}
.earn-desc{margin:0;font-size:13.5px;line-height:1.65;color:var(--muted,#6b7280)}
.earn-meta{margin:0;font-size:10.5px;font-weight:900;letter-spacing:.16em;color:var(--muted,#6b7280)}
.earn-dialog button{margin-top:9px}

/* 動きを減らす設定を尊重する。演出は消え、状態の変化だけが残る */
@media (prefers-reduced-motion:reduce){
  .badge-card,.earn-body,.earn-stage.play .badge-emblem,.real-japan-map .pref-path{
    animation:none!important;
  }
  .earn-stage.play::after{display:none}
  .badge-card.earned .badge-emblem.rank-legend::after{animation:none;background-position:-140% 0,0 0,0 0}
  .mini-bar span,.real-japan-map .pref-path{transition:none}
}

/* ── v4.9.0 カスケード再構成の互換確定 ───────────────────
   読み込み順を styles → v2 → fixes(v3-15) → v16 に正した結果、旧順序では v2 が
   偶然勝っていた3セレクタの見た目が変わる。βで承認済みの現在の見た目を正とし、
   ここで明示的に確定する（暗黙の逆転を、意図した宣言に置き換えるのが目的）。 */
.badge-card .task-name{color:var(--accent)}
.pack-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media(min-width:700px){.pack-grid{grid-template-columns:repeat(3,1fr)}}
.pack-button{min-height:62px;border-color:#e5e7eb;border-radius:15px;background:#fafafa}

/* ── シートの横流出バグ修正 ─────────────────────────────
   .sheet-body は grid で、子の min-width:auto が「縮められない内容」に引っ張られる。
   タスク追加のアイコン列（flex:0 0 48px ×16個 ≒ 832px）がラベルごと画面外へ広がり、
   width:100% の入力欄まで832pxになっていた（iPhone実機で入力欄が右へ流出）。
   grid の子の最小幅を0にして、アイコン列は本来の overflow:auto で横スクロールさせる。 */
.sheet-body>*{min-width:0}