/* 志賀町をあつめよう — 基本スタイル
   白基調・軽さ・カードが主役。外部フォント/外部アイコンは使わない。 */

:root{
  --bg:#fbfaf7;
  --surface:#ffffff;
  --ink:#22201d;
  --ink-2:#5d574f;
  --ink-3:#8d867c;
  --line:#e7e2d9;
  --line-2:#f1ede5;
  --accent:#1f6f5c;        /* 能登の海と松 */
  --accent-soft:#e8f1ee;
  --coin:#b8862b;
  --coin-soft:#fdf5e3;
  --gourmet:#c2603f;
  --spot:#2f6f8f;
  --culture:#7a5aa8;
  --danger:#b3402f;
  --radius:16px;
  --shadow-1:0 1px 2px rgba(34,32,29,.06), 0 2px 8px rgba(34,32,29,.05);
  --shadow-2:0 6px 24px rgba(34,32,29,.13);
  --tabbar-h:60px;
  --appbar-h:52px;
  /* カードに印刷する文字。読みやすさを最優先にするので、ここは変えない。 */
  --font:-apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN",
         "Yu Gothic UI", "Yu Gothic", "Noto Sans JP", "Meiryo", system-ui, sans-serif;
  /* 画面まわりの文字。ロゴに合う、角の丸い書体を優先する。
     外部フォントは使わない決まりなので、端末に入っているものから選ぶ。
     丸ゴシックが無い端末では、これまでどおりの書体になる。 */
  --font-ui:"Hiragino Maru Gothic ProN", "Hiragino Maru Gothic Pro", "ヒラギノ丸ゴ ProN W4",
            sans-serif-rounded, "Rounded Mplus 1c", "M PLUS Rounded 1c",
            "Quicksand", "Varela Round", var(--font);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-ui);
  background:var(--bg); color:var(--ink);
  -webkit-text-size-adjust:100%;
  overscroll-behavior-y:none;
  line-height:1.7;
}
[hidden]{display:none !important}
button{font:inherit;color:inherit}
a{color:var(--accent)}

/* ===== PC / タブレットは中央にスマホ幅 ===== */
.app{
  max-width:480px; margin:0 auto; min-height:100dvh;
  background:var(--bg);
  box-shadow:0 0 0 1px var(--line-2);
  position:relative;
  padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom));
}
@media (min-width:520px){ .app{ box-shadow:0 0 40px rgba(34,32,29,.08) } }

/* ===== アプリバー ===== */
.appbar{
  position:sticky; top:0; z-index:30;
  height:calc(var(--appbar-h) + env(safe-area-inset-top));
  padding:env(safe-area-inset-top) 12px 0;
  display:flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.4) blur(8px);
  border-bottom:1px solid var(--line-2);
}
.appbar__title{
  font-size:15.5px; font-weight:800; margin:0; letter-spacing:.03em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1 1 auto;
}
.appbar__back{
  width:32px;height:32px;flex:none;border:0;background:transparent;padding:0;
  display:grid;place-items:center;border-radius:50%;cursor:pointer;
}
.appbar__back:active{background:var(--line-2)}
.appbar__back svg{width:22px;height:22px}
.appbar__stats{display:flex;align-items:center;gap:8px;flex:none}
.stat{
  display:inline-flex;align-items:center;gap:4px;
  font-size:11px;color:var(--ink-2);
  background:var(--surface);border:1px solid var(--line);
  padding:3px 8px;border-radius:999px;white-space:nowrap;
}
.stat b{font-size:12.5px;color:var(--ink)}
.stat i{font-style:normal;color:var(--ink-3)}
.stat .ico{width:13px;height:13px;flex:none}
.stat--coin{color:var(--coin);border-color:#efe1c2;background:var(--coin-soft)}
.stat--coin b{color:var(--coin)}

.offlinebar{
  background:#fff6e5;color:#8a5a12;border-bottom:1px solid #f0e0c0;
  font-size:12px;padding:6px 14px;text-align:center;
}

/* ===== ビュー ===== */
.view{ padding:16px 16px 18px; outline:none; }
.view h2{font-size:17px;margin:0 0 10px;letter-spacing:.02em}
.view h3{font-size:14px;margin:22px 0 8px;color:var(--ink-2);letter-spacing:.03em;font-weight:800}
.muted{color:var(--ink-3);font-size:12.5px}
.center{text-align:center}

/* ===== タブバー ===== */
.tabbar{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:480px;z-index:40;
  height:calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  display:grid;grid-template-columns:repeat(5,1fr);
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(8px);
  border-top:1px solid var(--line);
}
.tab{
  display:flex;align-items:center;justify-content:center;
  text-decoration:none;-webkit-tap-highlight-color:transparent;
}
/* 絵も文字もひとつの絵として描く（index.html の svg の中）。
   文字は輪郭と影を付けて、おもちゃのシールのような見た目にしてある。 */
.tab svg{
  width:100%;max-width:84px;height:auto;
  filter:saturate(.6) opacity(.88);
  transition:filter .16s ease, transform .26s cubic-bezier(.22,1.4,.5,1);
}
.tab.is-active svg{ filter:none; transform:translateY(-2px) scale(1.06) }
/* 押している間はぴょんと持ち上がり、画面が開いたらもとの位置に戻る。
   戻す側（is-popped を外す）は js/app.js が画面を描いたあとに行う。 */
.tab.is-popped svg,
.tab.is-popped.is-active svg{
  transform:translateY(-9px) scale(1.16);
  filter:none;
  transition:transform .13s cubic-bezier(.34,1.8,.64,1), filter .13s ease;
}
/* 文字は端末の書体ではなく、1画ずつの図形として描いてある（index.html）。
   うしろに太い線で輪郭を、手前に細い線で本体を重ねる。
   どの端末でも同じ形・同じ大きさで出る。 */
.tabw path{ fill:none; stroke-linecap:round; stroke-linejoin:round }
/* 影 → 輪郭 → 本体 の順に重ねて、裏面のロゴと同じ「厚みのある文字」にする */
.tabw__s path{ stroke:#2b2722; stroke-width:6.4; opacity:.22 }
.tabw__o path{ stroke:#2b2722; stroke-width:6 }
.tabw__i path{ stroke:#fff3dc; stroke-width:2.9 }
.tab.is-active .tabw__i path{ stroke:#ffd873 }
/* 選んでいるタブの下に小さな印 */
.tab.is-active::after{
  content:'';position:absolute;bottom:4px;
  width:18px;height:3px;border-radius:999px;background:var(--accent);
}
/* 読み上げ用の文字は、見た目には出さない */
.tab > span{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}

/* ===== ボタン ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border:1px solid var(--line);background:var(--surface);
  border-radius:999px;padding:10px 18px;font-size:14px;font-weight:700;
  cursor:pointer;text-decoration:none;color:var(--ink);
  transition:transform .08s ease, background .15s ease;
}
.btn:active{transform:scale(.98)}
.btn--primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn--block{display:flex;width:100%}
.btn--lg{padding:14px 20px;font-size:15.5px}
.btn--ghost{background:transparent;border-color:transparent;color:var(--accent)}
.btn--danger{color:var(--danger);border-color:#e6c8c2}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn__sub{font-size:11px;font-weight:500;opacity:.85}

/* ===== カード枠（共通） ===== */
.panel{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:14px;box-shadow:var(--shadow-1);
}
.panel + .panel{margin-top:12px}
.panel__head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:8px}
.panel__title{font-size:13.5px;font-weight:700;margin:0}

/* ===== ホーム ===== */
.hero{ text-align:center;padding:10px 0 4px; }
.hero__lead{font-size:12px;color:var(--ink-3);margin:0 0 2px;letter-spacing:.14em}
.hero__logo{
  position:relative;display:block;width:min(64%,230px);margin:0 auto 4px;
  aspect-ratio:320/213;      /* ロゴの形。読む前から場所を取って、あとで動かない */
}
.hero__logoimg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.hero__logoimg--hi{opacity:0;transition:opacity .2s linear}
.hero__logoimg--hi.is-on{opacity:1}
.hero__title{font-size:21px;margin:0 0 12px;letter-spacing:.06em;font-weight:800}
/* ホームのボタンは3つ。遊び方と設定は歯車へ移したので、
   残った場所の真ん中に置いて、下が空きすぎないようにする。 */
.home{
  display:flex;flex-direction:column;
  min-height:calc(100svh - var(--appbar-h) - var(--tabbar-h) - 34px - env(safe-area-inset-bottom));
}
.home__main{display:grid;gap:12px;margin:auto 0}
.bigbtn{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:17px 15px;cursor:pointer;box-shadow:var(--shadow-1);text-decoration:none;color:inherit;
  transition:transform .08s ease;
}
.bigbtn:active{transform:scale(.99)}
.bigbtn--accent{background:var(--accent);border-color:var(--accent);color:#fff}
.bigbtn--accent .bigbtn__sub{color:rgba(255,255,255,.82)}
.bigbtn__ico{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:10px;background:var(--accent-soft)}
.bigbtn--accent .bigbtn__ico{background:rgba(255,255,255,.16)}
.bigbtn__ico svg{width:22px;height:22px}
.bigbtn__t{font-size:15px;font-weight:700;display:block}
.bigbtn__sub{font-size:11.5px;color:var(--ink-3);display:block}
/* .home__sub（遊び方・設定）は廃止。右上の歯車から行く。 */

.progressline{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-2)}
.bar{flex:1;height:6px;border-radius:99px;background:var(--line-2);overflow:hidden}
.bar > span{display:block;height:100%;background:var(--accent);border-radius:99px;transition:width .4s ease}
.bar--coin > span{background:var(--coin)}
.bar--lg{height:9px;margin-top:2px}
.progressline__i{width:18px;height:18px;object-fit:contain;flex:none}
.progressline__n{flex:none;font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.collection__all{font-size:12.5px;font-weight:800;color:var(--accent)}

/* ===== カードグリッド ===== */
.tabs{display:flex;gap:6px;overflow-x:auto;padding:2px 0 10px;-webkit-overflow-scrolling:touch}
.tabs::-webkit-scrollbar{display:none}
.chip{
  flex:none;border:1px solid var(--line);background:var(--surface);
  border-radius:999px;padding:6px 13px;font-size:12.5px;cursor:pointer;white-space:nowrap;
}
.chip.is-active{background:var(--ink);color:#fff;border-color:var(--ink)}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.grid--2{grid-template-columns:repeat(2,1fr);gap:12px}
.cell{
  border:0;background:transparent;padding:0;cursor:pointer;text-align:left;display:block;
  /* 画面外のカードは描画も画像の展開もしない。53枚の一覧が一気に重くならないようにする。
     高さだけを仮置きする。幅まで指定すると列幅を押し広げて3列目がはみ出す。 */
  content-visibility:auto;
  contain-intrinsic-height:auto 188px;   /* 実測に合わせる。ずれると画面外の行の高さが狂う */
}
.cell__name{
  display:flex;gap:4px;align-items:baseline;justify-content:center;text-align:center;
  font-size:10.5px;line-height:1.35;margin-top:5px;color:var(--ink-2);
  /* 名前が1行でも2行でもマスの高さをそろえる（2行ぶんを先に確保する） */
  height:2.7em;
}
.cell__name > span{
  min-width:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
/* 番号は名前の行の先頭。カードの上には重ねない */
.cell__no{
  flex:none;color:var(--ink-3);
  font-size:9.5px;font-weight:800;letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
}
.cell{position:relative}
.cell__name--locked{color:var(--ink-3)}

/* ===== 未取得の枠 =====
   あとからカードがはまる場所。番号と名前は枠の下（名前の行）に出すので、
   枠の中は「？？？」だけにして、名前と重ならないようにする。 */
.card--slot{
  --slot-c:#b9b0a0;
  display:grid;place-content:center;gap:2px;text-align:center;
  background:color-mix(in srgb, var(--slot-c) 9%, #f4f1ea);
  /* 破線にして「まだ空いている場所」だと分かるようにする */
  border:2px dashed color-mix(in srgb, var(--slot-c) 52%, #d8d1c1);
  box-shadow:none;
  color:color-mix(in srgb, var(--slot-c) 72%, #8d8475);
}
.card--slot-gourmet{ --slot-c:#E8873A }
.card--slot-spot{    --slot-c:#4FB6D8 }
.card--slot-culture{ --slot-c:#A97BD8 }
.slot__no{ font-size:26cqw;font-weight:800;line-height:1;letter-spacing:.06em }
.slot__cat{ font-size:8cqw;font-weight:700;letter-spacing:.14em;opacity:.72 }

/* ===== 新しいカードが枠にはまる演出 =====
   動きの本体は、画面のまん中に大きく出して回す .snapfly（下）。
   枠の側は、飛んできたカードを受け止めて「パチーン」と収まるだけ。 */
.cell__box{ position:relative }
.cell__drop{ position:absolute;inset:0;border-radius:9px;overflow:hidden }
.cell--snap:not(.is-snapped) .cell__drop{ opacity:0 }
.cell--snap.is-snapped .cell__drop{
  animation:snapLand .26s cubic-bezier(.2,1.7,.4,1) both;
}
@keyframes snapLand{
  0%  { opacity:1; transform:scale(1.16) }
  55% { opacity:1; transform:scale(.97) }
  100%{ opacity:1; transform:scale(1) }
}

/* 画面のまん中で回してから、枠へ飛んでいくカード */
.snapdim{
  position:fixed;inset:0;z-index:64;
  background:radial-gradient(60% 44% at 50% 46%, rgba(28,25,22,.30), rgba(28,25,22,.52));
  animation:snapDimIn .28s ease both;
}
.snapdim.is-out{ animation:snapDimOut .34s ease both }
@keyframes snapDimIn{ from{ opacity:0 } to{ opacity:1 } }
@keyframes snapDimOut{ from{ opacity:1 } to{ opacity:0 } }

/* 外枠は位置だけを決める。動くのは中の .snapfly__c。
   回転は rotateY を使わず、横を縮めて 0 にしたところで面を入れ替える。
   3Dの裏面制御（backface-visibility）が効かない端末があり、
   そこでは表の絵が左右反転したまま見えてしまうため。 */
.snapfly{
  position:fixed;left:50%;top:46%;z-index:65;
  width:min(62vw,44vh,260px);aspect-ratio:4/5;
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.snapfly__c{
  position:absolute;inset:0;opacity:0;
  will-change:transform,opacity;
}
.snapfly__s{ position:absolute;inset:0;border-radius:10px;overflow:hidden;visibility:hidden }
.snapfly__s .card{ position:absolute;inset:0;width:100%;height:100%;border-radius:10px;box-shadow:none }

/* 小さく出てきて、ゆっくり3回ひるがえり、表で止まる。
   横幅が0になる 38% / 60% / 82% のところで、見せる面を入れ替える。 */
.snapfly.is-in .snapfly__c{ animation:snapSpin var(--tspin,1.5s) linear both }
@keyframes snapSpin{
  0%  { opacity:0; transform:scale(.42) scaleX(1) }
  10% { opacity:1; transform:scale(.55) scaleX(1) }
  38% { opacity:1; transform:scale(.80) scaleX(.02) }
  49% { opacity:1; transform:scale(.90) scaleX(1) }
  60% { opacity:1; transform:scale(.97) scaleX(.02) }
  71% { opacity:1; transform:scale(1.04) scaleX(1) }
  82% { opacity:1; transform:scale(1.02) scaleX(.02) }
  100%{ opacity:1; transform:scale(1) scaleX(1) }
}
/* 裏 → 表 → 裏 → 表。切り替えは隣り合う目盛りで一瞬に。 */
.snapfly.is-in .snapfly__s--back{ animation:snapFaceBack var(--tspin,1.5s) linear both }
.snapfly.is-in .snapfly__s--front{ animation:snapFaceFront var(--tspin,1.5s) linear both }
@keyframes snapFaceBack{
  0%{ visibility:visible } 37.9%{ visibility:visible }
  38%{ visibility:hidden } 59.9%{ visibility:hidden }
  60%{ visibility:visible } 81.9%{ visibility:visible }
  82%{ visibility:hidden } 100%{ visibility:hidden }
}
@keyframes snapFaceFront{
  0%{ visibility:hidden } 37.9%{ visibility:hidden }
  38%{ visibility:visible } 59.9%{ visibility:visible }
  60%{ visibility:hidden } 81.9%{ visibility:hidden }
  82%{ visibility:visible } 100%{ visibility:visible }
}
/* 枠へ吸い込まれる。表を向けたまま動かす。
   --dx / --dy / --k は js/collection.js が測って入れる */
.snapfly.is-fly .snapfly__c{ animation:snapFly var(--tfly,.44s) cubic-bezier(.5,-0.16,.3,1) forwards }
@keyframes snapFly{
  0%  { opacity:1; transform:translate(0,0) scale(1) }
  62% { opacity:1; transform:translate(calc(var(--dx) * .82), calc(var(--dy) * .82))
                             scale(calc(var(--k) * 1.5)) }
  100%{ opacity:1; transform:translate(var(--dx), var(--dy)) scale(var(--k)) }
}

/* はまったあと、そのカードだけ左から右へ光が走る */
/* 細く鋭い光。幅が広いと、ゆっくり通る靄のように見えてしまう */
.cell__drop::after{
  content:'';position:absolute;top:-22%;bottom:-22%;left:-40%;width:26%;
  z-index:2;pointer-events:none;opacity:0;
  background:linear-gradient(100deg,
    transparent, rgba(255,255,255,.5) 34%, #fff 50%,
    rgba(255,255,255,.5) 66%, transparent);
  transform:translateX(0) skewX(-16deg);
}
.cell--snap.is-snapped .cell__drop::after{ animation:snapSheen .7s ease-out .12s both }
@keyframes snapSheen{
  0%  { opacity:0; transform:translateX(0) skewX(-16deg) }
  10% { opacity:1 }
  88% { opacity:1 }
  100%{ opacity:0; transform:translateX(560%) skewX(-16deg) }
}
/* はまった瞬間に枠が一度だけ光る */
.cell--snap .cell__box::after{
  content:'';position:absolute;inset:-7%;border-radius:13px;pointer-events:none;
  border:2px solid var(--accent);opacity:0;
}
.cell--snap.is-snapped .cell__box::after{ animation:snapRing .46s ease-out 0s both }
@keyframes snapRing{
  0%  { opacity:0;  transform:scale(1.5) }
  34% { opacity:.95; transform:scale(1.03) }
  100%{ opacity:0;  transform:scale(.97) }
}
/* 演出のあいだだけは全部を描いておく。高さが確定していないと、寄せた先がずれる */
.grid--snapping .cell{ content-visibility:visible }


/* ===== カード見た目（画像未設定時のフォールバック） ===== */
.card{
  position:relative;width:100%;aspect-ratio:4/5;border-radius:9px;overflow:hidden;
  background:#efeae0;box-shadow:var(--shadow-1);
  container-type:size;                       /* 文字サイズをカードの実寸に合わせる */
}
/* 完成カード画像を表示するときは、画像の意匠を邪魔しない。
   組み立てカードは .cardart 側がコンテナなので、.card 側のコンテナは外す（一覧の描画が軽くなる） */
.card--img{background:transparent;box-shadow:none;container-type:normal}
/* 完成画像で上書きする場合の1枚絵。組み立てカード（.cardart 内の画像）には効かせない */
.card > img{width:100%;height:100%;object-fit:contain;display:block;background:#fff}
.card__face{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  padding:9% 8%;color:#fff;
}
.card__face--gourmet{background:linear-gradient(160deg,#d4764f,#a8492c 62%,#8d3a21)}
.card__face--spot{background:linear-gradient(160deg,#4d90ae,#265d7a 62%,#1d4a63)}
.card__face--culture{background:linear-gradient(160deg,#9c7cc6,#6b4b9a 62%,#553a80)}
.card__face--none{background:linear-gradient(160deg,#9c968a,#6e6759)}
.card__nm{
  font-size:12px; font-size:11.5cqw;
  font-weight:800;line-height:1.28;letter-spacing:.01em;
  text-shadow:0 1px 3px rgba(0,0,0,.25);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.card__sub{
  font-size:8.5px; font-size:6.6cqw;
  opacity:.85;margin-top:5%;letter-spacing:.04em;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.card__no{
  font-size:8px; font-size:6cqw;
  letter-spacing:.14em;opacity:.72;margin-top:5%;text-align:right;
}
.card__seal{
  position:absolute;right:7%;top:7%;width:17%;aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(255,255,255,.6);display:grid;place-items:center;
  font-size:6px;font-size:4.6cqw;opacity:.75;
}
.card--locked .card__face{filter:grayscale(1) brightness(.55) contrast(.8)}
.card--locked::after{
  content:"?";position:absolute;inset:0;display:grid;place-items:center;
  font-size:30px;font-size:26cqw;font-weight:800;color:rgba(255,255,255,.72);
}
.card--sm{border-radius:7px}
/* NEW は右下。カード意匠（バッジ・番号ピル・ロゴ）と重ならない位置 */
.card__new{
  position:absolute;right:0;bottom:6%;background:var(--danger);color:#fff;
  font-size:8.5px;font-weight:800;letter-spacing:.12em;padding:2px 5px 2px 6px;
  border-radius:4px 0 0 4px;
}

/* カード裏面 */
.cardback{
  position:absolute;inset:0;background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.045) 0 6px, transparent 6px 12px),
    radial-gradient(120% 80% at 50% 12%, #2c7a66 0%, #1f6f5c 42%, #12463a 100%);
  display:grid;place-items:center;color:rgba(255,255,255,.9);
}
.cardback__mark{
  width:46%;aspect-ratio:1;border-radius:50%;border:1.5px solid rgba(255,255,255,.5);
  display:grid;place-items:center;font-size:12px;font-weight:800;letter-spacing:.14em;
  text-align:center;line-height:1.3;
}

/* ===== 詳細 ===== */
/* カードが主役。画面の端まで大きく出して、名前や操作はその下に置く。 */
/* 左右に払って前後のカードへ。縦の動きはこれまでどおりブラウザに任せる */
.detail--swipe{ touch-action:pan-y }
.detail__hero{display:block}
.detail__cardwrap{
  /* 画面幅いっぱいの箱にして、その中でカードを10px内側に置く。
     前後のカードはこの箱の外にはみ出すので、ここで切って画面を横に伸ばさない。 */
  margin:0 -16px 10px;
  padding:4px 10px;
  overflow:hidden;
}
/* 前後のカードを左右に控えさせる。払っているあいだだけ見える。 */
.cardtrack{ position:relative }
.cardtrack.is-sliding{ will-change:transform }
.cardtrack.is-easing{ transition:transform .24s cubic-bezier(.25,.9,.3,1) }
.cardtrack__now{ position:relative }
/* カードの左上の番号。金の枠の上に置くので、絵は隠さない */
/* 番号は分類の横に並べる。カードの上には重ねない */
.detail__tags{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.detail__no{
  flex:none;color:var(--ink-3);
  font-size:11px;font-weight:800;letter-spacing:.03em;
  font-variant-numeric:tabular-nums;
}
.cardtrack__side{
  position:absolute;top:0;width:100%;
  pointer-events:none;display:none;
}
.cardtrack.is-sliding .cardtrack__side,
.cardtrack.is-easing .cardtrack__side{ display:block }
.cardtrack__side--prev{ right:calc(100% + 14px) }
.cardtrack__side--next{ left:calc(100% + 14px) }
.detail__cardwrap .card{
  border-radius:10px;box-shadow:0 6px 18px rgba(34,32,29,.10);
  /* カード詳細はスクロールさせない。下に置く情報のぶんを引いた高さに収める。
     カードは 4:5 なので、使える高さ × 0.8 が幅の上限になる。 */
  max-width:calc((100dvh - 390px) * .8);
  margin-inline:auto;
}
.detail__hero--compact .detail__cardwrap .card{ max-width:calc((100dvh - 430px) * .8) }
/* 未取得の空き枠も、取得済みのカードと同じ大きさで出す。
   左右に払って行き来したときに、画面が上下に動かないため。 */
.detail__cardwrap .card--slot{border-radius:10px;box-shadow:none}
.detail__meta{min-width:0}
.detail__cat{
  display:inline-block;font-size:10.5px;padding:2px 9px;border-radius:999px;
  background:var(--accent-soft);color:var(--accent);letter-spacing:.06em;
}
.detail__name{font-size:19px;font-weight:800;margin:7px 0 2px;line-height:1.35}
.detail__sub{font-size:11.5px;color:var(--ink-3)}
.detail__acts{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
/* 現地訪問の欄。1画面に収めるため、余白は詰める */
.panel--tight{padding:10px 12px;margin-top:10px}
.spotline{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;margin-bottom:8px}
.detail__acts > *{flex:1;min-width:8em}
.detail p{font-size:13.5px;margin:0 0 10px}
.deflist{display:grid;gap:8px;font-size:13px}
.deflist__row{display:flex;gap:10px}
.deflist__k{flex:none;width:5.5em;color:var(--ink-3);font-size:12px}
.deflist--wide .deflist__k{width:9em}
.photos{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.photos img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;background:var(--line-2)}
.note{font-size:11.5px;color:var(--ink-3);margin-top:10px;line-height:1.6}
.linklist{display:grid;gap:8px;margin-top:4px}

.fav{
  border:1px solid var(--line);background:var(--surface);border-radius:999px;
  padding:8px 14px;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
}
.fav.is-on{background:#fff4f2;border-color:#f0cec6;color:#b3402f}

/* ===== まち巡り ===== */
.mapwrap{
  position:relative;width:100%;height:min(58vh,420px);border-radius:var(--radius);
  overflow:hidden;border:1px solid var(--line);background:#e8eae4;touch-action:none;
}
.map__tiles{position:absolute;inset:0;will-change:transform}
.map__tile{position:absolute;width:256px;height:256px;user-select:none;-webkit-user-drag:none}
.map__pin{
  position:absolute;transform:translate(-50%,-100%);cursor:pointer;
  display:grid;place-items:center;width:26px;height:32px;
}
.map__pin svg{width:26px;height:32px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))}
.map__me{
  position:absolute;transform:translate(-50%,-50%);width:16px;height:16px;border-radius:50%;
  background:#2f6f8f;border:2.5px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.15);
}
.map__attr{
  position:absolute;right:0;bottom:0;background:rgba(255,255,255,.85);
  font-size:9.5px;padding:2px 6px;border-radius:6px 0 0 0;color:var(--ink-2);
}
.map__attr a{color:inherit}
.map__zoom{position:absolute;right:8px;top:8px;display:grid;gap:5px}
.map__zoom button{
  width:32px;height:32px;border-radius:8px;border:1px solid var(--line);
  background:rgba(255,255,255,.95);font-size:17px;line-height:1;cursor:pointer;
}
.spotrow{
  display:flex;align-items:center;gap:10px;padding:10px 2px;border-bottom:1px solid var(--line-2);
  cursor:pointer;
}
.spotrow:last-child{border-bottom:0}
/* 行の右端の「経路」。行のタップ（カード詳細へ）とは別の行き先 */
.spotrow__go{
  flex:none;margin-left:auto;text-decoration:none;
  font-size:11.5px;font-weight:700;color:var(--accent);
  border:1px solid var(--line);border-radius:999px;padding:5px 11px;background:var(--surface);
}

/* アプリバーの歯車。設定やその他はここから行く */
.appbar__gear{
  flex:none;display:grid;place-items:center;width:34px;height:34px;
  border-radius:50%;text-decoration:none;
}
.appbar__gear svg{width:23px;height:23px;transition:transform .18s ease}
.appbar__gear:active{background:var(--line-2)}
.appbar__gear:active svg{transform:rotate(28deg)}

/* タブの数字（受け取れるミッションの件数） */
.tab{position:relative}
.tab__badge{
  position:absolute;top:0;left:50%;margin-left:7px;
  min-width:16px;height:16px;padding:0 4px;border-radius:999px;
  background:var(--danger);color:#fff;
  font-size:10px;font-weight:800;line-height:16px;text-align:center;
}

/* ===== ミッション ===== */
.missionlist{padding:0}
.missionrow{
  display:flex;gap:10px;align-items:center;
  padding:11px 12px;border-bottom:1px solid var(--line-2);
}
.missionrow:last-child{border-bottom:0}
.missionrow__b{flex:1;min-width:0}
.missionrow__n{font-size:13px;font-weight:700;line-height:1.35;margin-bottom:6px}
.missionrow__d{display:flex;align-items:center;gap:3px;font-size:11px;color:var(--ink-3);margin-top:5px}
.missionrow__go{flex:none;padding:8px 14px;font-size:12.5px}
.missionrow__coin{display:inline-flex;align-items:center;gap:3px;flex:none;font-size:12px;font-weight:800;color:var(--coin)}
.missionrow__ok{flex:none;font-size:15px;color:#4a7a4a}
.missionrow.is-ready{background:var(--coin-soft)}
.missionrow.is-claimed .missionrow__n{color:var(--ink-3);font-weight:600}

/* ===== SHIKA COIN =====
   絵は assets/icons/coin*.png。小さく出すところは軽い方を読む。 */
.coinico{width:15px;height:15px;flex:none;display:block}
.coinico--lg{width:64px;height:64px}
.coin{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.coin__n{font-size:13px;color:var(--coin)}
.coin__u{font-size:11px;color:var(--ink-3)}
.coin--lg .coin__n{font-size:30px;line-height:1.1}
.coin--lg .coin__u{font-size:12px}
/* 上のおびのコインは、文字の高さに合わせて少し小さく */
.stat .coinico{width:19px;height:19px;margin:-3px 0}
.stat--coin{padding:3px 10px 3px 5px;gap:5px}
.stat--coin b{font-size:14px;font-variant-numeric:tabular-nums}

/* 集めた記録の、ためたコイン */
.coinbox{display:flex;align-items:center;gap:14px}
.coinbox__n{font-size:32px;font-weight:800;color:var(--coin);line-height:1.05}
.coinbox__u{font-size:12px;color:var(--ink-3);margin-top:2px}

/* ===== ガチャ画面 =====
   上からコイン・カードの裏・ボタン2つを積む。
   カードの裏は、ボタンが入る残りの高さいっぱいまで大きくする。 */
.gachahome{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  /* 画面の高さから、上のおび・タブ・この画面の余白を引いた分。
     svh（アドレスバーが出ている状態の高さ）で測るので、
     ボタンが画面の外に押し出されることがない。 */
  height:calc(100svh - var(--appbar-h) - var(--tabbar-h) - 34px - env(safe-area-inset-bottom));
}
/* コインの絵を画面の真ん中に置き、枚数はその右に添える。
   左右を同じ幅の列にすると、枚数の桁が増えてもコインの位置は動かない。 */
.gachahome__coin{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:10px;
  width:100%;flex:none;
}
.gachahome__coin > .coinico{grid-column:2}
.gachahome__coin > .gachahome__n{grid-column:3;justify-self:start}
.gachahome__coin .coinico--lg{width:60px;height:60px}
.gachahome__n{
  font-size:32px;font-weight:800;color:var(--coin);line-height:1;
  font-variant-numeric:tabular-nums;
}
/* 残りの高さをぜんぶ使う。カードは縦横の比を保ったまま、入るだけ大きく。
   高さの割合で指定すると親の高さが決まらず 0 になるので、
   場所を目いっぱい取ったうえで、中の絵を「はみ出さない最大」で置く。 */
.gachahome__card{
  flex:1 1 auto;min-height:0;width:100%;position:relative;
  /* 念のための上限。ここを超えて大きくならないので、ボタンは必ず見える。 */
  max-height:46svh;
}
.gachahome__card .card{
  position:absolute;inset:0;width:auto;height:auto;
  /* .card の 4:5 を外す。残っていると高さが横幅から決まってしまい、
     上限（max-height）を超えて大きくなる。 */
  aspect-ratio:auto;
  background:none;box-shadow:none;border-radius:0;overflow:visible;
  container-type:normal;
}
.gachahome__card .card > img,
.gachahome__card .card > .cardback{
  position:absolute;inset:0;margin:auto;
  width:auto;height:auto;max-width:100%;max-height:100%;
  border-radius:12px;box-shadow:var(--shadow-2);
}
.gachahome__acts{flex:none;width:100%;display:grid;gap:10px}

/* たまごが孵る前のように、ゆらゆら揺れる。下を軸にして左右に傾ける。
   揺らすのは中の絵。外側は場所を決めるだけなので動かさない。 */
.card--wobble > *{
  transform-origin:50% 94%;
  animation:eggwobble 3.4s ease-in-out infinite;
}
@keyframes eggwobble{
  0%,52%,100%{ transform:rotate(0deg) }
  57%{ transform:rotate(-5deg) }
  63%{ transform:rotate(4deg) }
  69%{ transform:rotate(-3deg) }
  75%{ transform:rotate(2deg) }
  81%{ transform:rotate(-1.2deg) }
  88%{ transform:rotate(.5deg) }
}
@media (prefers-reduced-motion: reduce){
  .card--wobble > *{ animation:none }
}

/* ガチャのボタン。名前の右に、値段を「コインの絵＋数字」で並べる。 */
.btn--gacha{gap:14px;padding:15px 20px}
.btn--gacha__label{font-size:17px;font-weight:800;letter-spacing:.04em}
.btn--gacha__cost{
  display:inline-flex;align-items:center;gap:4px;
  font-size:17px;font-weight:800;font-variant-numeric:tabular-nums;
}
/* 上のコインと同じ絵。文字の高さに合わせる */
.btn--gacha__cost .coinico{width:22px;height:22px}
.btn:not(.btn--primary) .btn--gacha__cost{color:var(--coin)}
.btn--primary .btn--gacha__cost{color:#fff}

/* 10連の「1枚おトク」の吹き出し。ボタンの右上にくっつけ、しっぽをボタンへ向ける。 */
.gachabtn{position:relative}
.gachabtn > .btn{width:100%}
.gachabtn__pop{
  position:absolute;right:8px;top:-20px;z-index:2;
  display:flex;flex-direction:column;align-items:center;line-height:1.1;
  padding:5px 11px 5px;border-radius:14px;
  background:#ffd54a;color:#5a3a00;
  border:2px solid #2b2722;
  box-shadow:0 2px 0 #2b2722;
  transform:rotate(4deg);
  animation:popBob 2.4s ease-in-out infinite;
  pointer-events:none;
}
.gachabtn__pop b{font-size:13px;font-weight:900;letter-spacing:.02em;white-space:nowrap}
.gachabtn__pop small{font-size:9.5px;font-weight:700;white-space:nowrap}
/* しっぽ（外側の黒ふち → 内側の黄色 の2枚重ね） */
.gachabtn__pop::before,
.gachabtn__pop::after{
  content:'';position:absolute;left:22px;width:0;height:0;
  border-style:solid;border-color:transparent;
}
.gachabtn__pop::before{bottom:-11px;border-width:11px 7px 0 7px;border-top-color:#2b2722}
.gachabtn__pop::after{bottom:-7px;left:24px;border-width:8px 5px 0 5px;border-top-color:#ffd54a}
@keyframes popBob{
  0%,100%{transform:rotate(4deg) translateY(0)}
  50%{transform:rotate(4deg) translateY(-3px)}
}
@media (prefers-reduced-motion: reduce){ .gachabtn__pop{animation:none} }
/* 吹き出しがはみ出るぶん、ボタン同士の間をあける */
.gachahome__acts{gap:26px;padding-top:6px}

/* 結果のおまけ */
.card__bonus{
  position:absolute;left:0;top:6%;background:#ffd54a;color:#5a3a00;
  font-size:8.5px;font-weight:900;letter-spacing:.06em;padding:2px 6px 2px 5px;
  border-radius:0 4px 4px 0;
}
.result__bonusnote{
  display:inline-block;margin:2px 0 4px;padding:2px 10px;border-radius:999px;
  background:#fff4c7;color:#7a5200;font-size:11.5px;font-weight:800;
}

/* ===== 称号（ミッション画面） =====
   4つを 2×2 に並べ、ジャンルの絵がしっかり見える大きさにする。 */
.titlegrid{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;
}
.titlebadge{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:12px 8px;border-radius:14px;
  background:var(--bg);border:1px solid var(--line-2);
}
.titlebadge__ring{
  width:72px;height:72px;border-radius:50%;
  display:grid;place-items:center;
  background:#f1eee7;border:2px solid var(--line);
}
.titlebadge__i{width:56px;height:56px;object-fit:contain;display:block;filter:grayscale(1) opacity(.45)}
.titlebadge__n{font-size:12px;font-weight:800;color:var(--ink-3);text-align:center;line-height:1.3}
.titlebadge__s{font-size:10.5px;color:var(--ink-3);letter-spacing:.08em}
/* 達成したものは色がつき、金色のふちがつく */
.titlebadge.is-on{background:var(--coin-soft);border-color:#efe1c2}
.titlebadge.is-on .titlebadge__ring{background:#fff;border-color:#e3c789;box-shadow:0 2px 8px rgba(184,134,43,.18)}
.titlebadge.is-on .titlebadge__i{filter:none}
.titlebadge.is-on .titlebadge__n{color:var(--ink)}
.titlebadge.is-on .titlebadge__s{color:var(--coin);font-weight:800}

/* ===== SNSでシェア ===== */
.home__share{margin-top:4px;gap:8px;color:var(--ink-2);font-size:14px}
.home__share svg{width:18px;height:18px;flex:none}
.sharelist{display:grid;gap:8px;margin:4px 0 2px}
.share--x{background:#111;border-color:#111;color:#fff}
.share--line{background:#06c755;border-color:#06c755;color:#fff}
.share--fb{background:#1877f2;border-color:#1877f2;color:#fff}

/* ===== 管理モード（公開前の点検用） ===== */
.adminbar{
  display:block;text-align:center;text-decoration:none;
  background:#7a2f2f;color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.04em;
  padding:6px 12px;position:sticky;top:calc(var(--appbar-h) + env(safe-area-inset-top));z-index:25;
}
.adminacts{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.adminacts .btn{font-size:12.5px;padding:10px 8px}
.adminlist{padding:0}
.adminrow{
  display:flex;gap:10px;align-items:flex-start;cursor:pointer;
  padding:9px 12px;border-bottom:1px solid var(--line-2);
}
.adminrow:last-child{border-bottom:0}
.adminrow__no{flex:none;width:3.2em;color:var(--ink-3);font-size:12px;font-variant-numeric:tabular-nums;padding-top:1px}
.adminrow__b{min-width:0;flex:1}
.adminrow__n{font-size:13px;font-weight:700;line-height:1.3}
.adminrow__t{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.atag{font-size:10px;line-height:1.6;padding:0 6px;border-radius:4px;white-space:nowrap}
.atag--ok{background:#e8efe9;color:#356b45}
.atag--warn{background:#fbf0da;color:#8a6416}
.atag--ng{background:#f7e2e2;color:#8a3030}


/* 行の目印。まだならタブと同じピン、行ったならミッション達成と同じ「✓」。 */
.spotrow__i{width:26px;height:26px;flex:none;display:grid;place-items:center}
.spotrow__i svg{width:22px;height:22px;display:block}
.spotrow__i--done{color:#4a7a4a}
.spotrow__i--done svg{width:19px;height:19px}
/* 近い順の上位は、ピンを少しだけ大きく見せる */
.spotrow__i--near svg{width:25px;height:25px}
.spotrow__t{flex:1;min-width:0}
.spotrow__n{font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spotrow__d{font-size:11.5px;color:var(--ink-3)}

/* ===== 設定 / リスト ===== */
.list{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.list__item{
  display:flex;align-items:center;gap:10px;padding:13px 14px;
  border-bottom:1px solid var(--line-2);width:100%;background:none;border-left:0;border-right:0;border-top:0;
  cursor:pointer;text-align:left;text-decoration:none;color:inherit;font-size:14px;
}
.list__item:last-child{border-bottom:0}
.list__item span{flex:1}
.switch{
  position:relative;width:42px;height:25px;border-radius:99px;background:var(--line);
  border:0;flex:none;cursor:pointer;transition:background .18s ease;
}
.switch::after{
  content:"";position:absolute;top:2.5px;left:2.5px;width:20px;height:20px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .18s ease;
}
.switch.is-on{background:var(--accent)}
.switch.is-on::after{transform:translateX(17px)}

/* ===== オーバーレイ / ダイアログ ===== */
.overlay{
  position:fixed;inset:0;z-index:60;background:rgba(28,26,23,.55);
  display:grid;place-items:center;padding:18px;backdrop-filter:blur(2px);
}
.dialog{
  background:var(--surface);border-radius:16px;padding:20px;max-width:340px;width:100%;
  box-shadow:var(--shadow-2);
}
.dialog h3{margin:0 0 8px;font-size:16px}
.dialog p{margin:0 0 14px;font-size:13.5px;color:var(--ink-2)}
.dialog__acts{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}

.toast{
  position:fixed;left:50%;bottom:calc(var(--tabbar-h) + 18px + env(safe-area-inset-bottom));
  transform:translateX(-50%);z-index:80;
  background:rgba(34,32,29,.94);color:#fff;font-size:13px;
  padding:10px 18px;border-radius:999px;max-width:88vw;text-align:center;
  box-shadow:var(--shadow-2);
}

.fullnote{max-width:420px;margin:0 auto;padding:40px 22px;font-size:14px}
.fullnote h1{font-size:17px}
.fullnote pre{background:#f3efe8;padding:10px;border-radius:8px;font-size:12px;overflow-x:auto}
.notice{padding:24px;text-align:center}

/* ===== 起動演出 =====
   見た目と動きはすべて css/opening.css（js/opening.js が組み立てる）。 */

.empty{padding:36px 12px;text-align:center;color:var(--ink-3);font-size:13px}
.badgegrid{display:flex;flex-wrap:wrap;gap:6px}
.badge{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11px;border:1px solid var(--line);border-radius:999px;padding:4px 11px 4px 5px;
  background:var(--surface);color:var(--ink-2);
}
/* 称号の絵。未達成のときは色を落として控えめにする */
.badge__i{width:18px;height:18px;object-fit:contain;flex:none;filter:saturate(.15) opacity(.5)}
.badge--on{background:var(--coin-soft);border-color:#efe1c2;color:var(--coin);font-weight:700}
.badge--on .badge__i{filter:none}