/* 旅する名探偵 — 和風探偵テーマ / 純CSS・依存なし */
:root{
  --ai:#1a2740;      /* 藍 */
  --ai-2:#25324f;
  --shu:#c0392b;     /* 朱 */
  --shu-2:#d1495b;
  --kin:#c9a227;     /* 金 */
  --kinari:#f4ecd8;  /* 生成り */
  --sumi:#20232a;    /* 墨 */
  --midori:#4a7c59;  /* 深緑 */
  --paper:#f7f1e3;
  --line:#e0d4b8;
  --muted:#6b6250;
  --radius:14px;
  --tab-h:62px;
  --shadow:0 6px 20px rgba(26,39,64,.14);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:"Hiragino Mincho ProN","Yu Mincho",serif;
  background:var(--kinari);
  color:var(--sumi);
  line-height:1.7;
  overscroll-behavior-y:none;
}
#app{max-width:520px;margin:0 auto;min-height:100vh;padding-bottom:calc(var(--tab-h) + env(safe-area-inset-bottom));background:var(--paper);box-shadow:0 0 40px rgba(0,0,0,.06)}

/* トップバー */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:8px;
  background:linear-gradient(180deg,var(--ai),var(--ai-2));color:#fff;padding:12px 14px;
  padding-top:calc(12px + env(safe-area-inset-top));box-shadow:var(--shadow)}
.topbar-back{color:#fff;text-decoration:none;font-size:26px;width:30px;text-align:center;line-height:1}
.topbar-back.ghost{visibility:hidden}
.topbar-title{flex:1;font-size:17px;font-weight:700;letter-spacing:.04em}
.topbar-points{background:rgba(255,255,255,.14);border:1px solid rgba(201,162,39,.5);color:var(--kin);
  padding:4px 10px;border-radius:999px;font-size:14px;white-space:nowrap}

.content{padding:16px 16px 26px}

/* ヒーロー */
.hero{background:radial-gradient(120% 100% at 50% 0,var(--ai-2),var(--ai));color:var(--kinari);
  border-radius:var(--radius);padding:30px 20px;text-align:center;margin-bottom:16px;
  border:1px solid var(--kin);position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;background:
  radial-gradient(circle at 80% 20%,rgba(201,162,39,.18),transparent 40%)}
.hero.small{padding:18px}
.hero-title{font-size:26px;font-weight:800;letter-spacing:.1em}
.hero.small .hero-title{font-size:20px}
.hero-sub{font-size:13px;opacity:.85;margin-top:6px;letter-spacing:.08em}

/* キャラ吹き出し */
.buddy{display:flex;gap:12px;align-items:flex-start;margin:14px 0}
.buddy-face{flex:none;width:48px;height:48px;border-radius:50%;background:var(--ai);
  display:flex;align-items:center;justify-content:center;font-size:26px;border:2px solid var(--kin)}
.buddy-text{background:#fff;border:1px solid var(--line);border-radius:4px 16px 16px 16px;
  padding:12px 14px;font-size:14.5px;box-shadow:var(--shadow);position:relative}

/* ボタン */
.btn{display:block;width:100%;text-align:center;text-decoration:none;cursor:pointer;
  background:#fff;color:var(--ai);border:1.5px solid var(--ai);border-radius:12px;
  padding:13px 16px;font-size:15px;font-weight:700;font-family:inherit;margin:10px 0;transition:.15s}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--shu);border-color:var(--shu);color:#fff;box-shadow:0 4px 12px rgba(192,57,43,.3)}
.btn.ghost{background:transparent;border-color:var(--line);color:var(--muted)}
.btn.danger{background:transparent;border-color:var(--shu);color:var(--shu)}
.btn.big{padding:16px;font-size:17px}
.btn.small{width:auto;display:inline-block;padding:8px 14px;font-size:13px;margin:6px 0}

/* カード / 進捗 */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin:14px 0;box-shadow:var(--shadow)}
.progress-head{display:flex;justify-content:space-between;font-size:14px;margin-bottom:8px;font-weight:700}
.progress-bar{height:12px;background:#eee3cc;border-radius:999px;overflow:hidden}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--kin),var(--shu));transition:width .5s}
.home-actions{margin-top:12px}
.fineprint{font-size:11.5px;color:var(--muted);margin-top:10px;line-height:1.6}

/* マップ */
.map-outer{position:relative;border-radius:var(--radius);overflow:hidden;border:2px solid var(--kin);box-shadow:var(--shadow);background:#f4ecd8}
.town-map-svg{display:block;width:100%;height:auto}
.map-title{font-family:serif;fill:var(--ai);font-size:40px;font-weight:800;letter-spacing:.1em}
.map-title-sub{fill:var(--muted);font-size:16px;letter-spacing:.2em}
.map-pin{position:absolute;transform:translate(-50%,-100%);background:none;border:none;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;padding:0}
.map-pin[disabled]{cursor:default}
.pin-dot{width:34px;height:34px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:15px;
  border:2px solid #fff;box-shadow:0 3px 8px rgba(0,0,0,.35)}
.pin-dot>*{transform:rotate(45deg)}
.map-pin .pin-name{font-size:11px;background:rgba(255,255,255,.9);color:var(--sumi);padding:1px 6px;
  border-radius:6px;margin-top:6px;white-space:nowrap;border:1px solid var(--line)}
.map-pin.active .pin-dot{background:var(--shu);animation:bounce 1.4s infinite}
.map-pin.solved .pin-dot{background:var(--midori)}
.map-pin.locked .pin-dot{background:#9a917d}
.map-pin.locked .pin-name{opacity:.6}
@keyframes bounce{0%,100%{transform:rotate(-45deg) translateY(0)}50%{transform:rotate(-45deg) translateY(-5px)}}
.map-legend{display:flex;gap:16px;justify-content:center;font-size:12px;color:var(--muted);margin:12px 0}
.map-legend i.lg{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:5px;vertical-align:middle}
.lg.active{background:var(--shu)}.lg.solved{background:var(--midori)}.lg.locked{background:#9a917d}

/* スポット */
.spot-head{margin-bottom:6px}
.spot-head.compact h2{margin:0}
.spot-no{font-size:12px;letter-spacing:.2em;color:var(--shu);font-weight:800}
.spot-head h2{margin:2px 0;font-size:24px;display:flex;align-items:baseline;gap:10px}
.spot-head h2 small{font-size:13px;color:var(--muted);font-weight:400}
.badge.cat{display:inline-block;background:var(--ai);color:#fff;font-size:12px;padding:2px 12px;border-radius:999px}
.spot-short{color:var(--muted);font-size:14px}
.spot-actions{margin-top:10px}
.arrive-box{margin-top:16px}
.arrive-alt{display:flex;gap:8px;margin-top:10px}
.arrive-alt input{flex:1;padding:12px;border:1.5px solid var(--line);border-radius:10px;font-size:15px;font-family:inherit}
.arrive-alt .btn{margin:0;white-space:nowrap}
.solved-note{background:#eef6ef;border-color:#cfe6d3;color:#2e5d3a;font-size:14px}

/* 探索（AR） */
.ar-scene{position:relative;border-radius:var(--radius);overflow:hidden;border:2px solid var(--sumi);box-shadow:var(--shadow)}
.ar-scene-svg{display:block;width:100%;height:auto}
.hotspot{position:absolute;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;
  background:none;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center}
.hs-ring{width:26px;height:26px;border-radius:50%;border:2px solid var(--kin);
  box-shadow:0 0 0 6px rgba(201,162,39,.18);animation:pulse 1.8s infinite}
.hotspot.tapped .hs-ring{border-color:#fff;background:rgba(201,162,39,.3);animation:none}
@keyframes pulse{0%{box-shadow:0 0 0 4px rgba(201,162,39,.35)}70%{box-shadow:0 0 0 14px rgba(201,162,39,0)}100%{box-shadow:0 0 0 4px rgba(201,162,39,0)}}
.ar-reveal{margin-top:14px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;font-size:14.5px;min-height:56px}
.clue-found{margin-top:8px;background:#fff6df;border:1px dashed var(--kin);border-radius:8px;padding:8px 10px;font-size:13.5px}

/* 謎解き */
.puzzle-card{background:#fffdf6;border-color:var(--kin)}
.puzzle-q{font-size:16px;font-weight:600;white-space:pre-line;line-height:1.9}
.puzzle-sup{font-size:12.5px;color:var(--muted);margin-top:10px;border-top:1px dashed var(--line);padding-top:8px}
.answer-box{display:flex;gap:8px;margin:10px 0}
.answer-box input{flex:1;padding:14px;border:2px solid var(--ai);border-radius:12px;font-size:17px;font-family:inherit;text-align:center}
.answer-box .btn{margin:0;white-space:nowrap;width:auto;padding:14px 18px}

/* ヒント */
.hint-list{margin:10px 0}
.hint-row{display:flex;align-items:center;gap:10px;justify-content:space-between;
  border-bottom:1px solid var(--line);padding:10px 0}
.hint-row>span{font-weight:700;font-size:13px;color:var(--shu);white-space:nowrap}
.hint-row.open{flex-direction:column;align-items:flex-start;gap:4px}
.hint-row.open p{margin:0;font-size:14px}
.hint-row .btn{margin:0}

/* ミステリーファイル */
.frag-card{background:var(--ai);border-color:var(--kin)}
.frag-title{color:var(--kin);font-size:13px;font-weight:800;letter-spacing:.1em;margin-bottom:10px}
.frag-card .frag-title{color:var(--kin)}
.frag-row{display:flex;gap:10px;flex-wrap:wrap}
.frag{width:46px;height:46px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-size:22px;font-weight:800;background:rgba(255,255,255,.08);color:#fff9;border:1.5px dashed rgba(255,255,255,.3)}
.frag.on{background:var(--kin);color:var(--sumi);border-style:solid;border-color:var(--kin)}
.frag.mini{width:40px;height:40px;font-size:19px;background:#eee3cc;color:#b3a888;border-color:#d8c9a8}
.frag.mini.on{background:var(--kin);color:var(--sumi)}
.file-list{margin-top:12px}
.file-row{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:12px;margin-bottom:10px;box-shadow:var(--shadow)}
.file-row.todo{opacity:.7}
.file-no{width:30px;height:30px;flex:none;border-radius:50%;background:var(--ai);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800}
.file-row.done .file-no{background:var(--midori)}
.file-main{flex:1;min-width:0}
.file-name{font-weight:700}
.file-sub{font-size:12px;color:var(--muted)}
.file-status{font-size:11.5px;padding:3px 8px;border-radius:999px;white-space:nowrap;font-weight:700}
.file-status.done{background:#eef6ef;color:#2e5d3a}
.file-status.wip{background:#fff2df;color:#a5710f}
.file-status.todo{background:#f0ece0;color:#9a917d}

/* アーカイブ */
.arch-list{margin-top:8px}
.arch-row{display:flex;justify-content:space-between;align-items:center;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:14px 16px;margin-bottom:10px;text-decoration:none;color:var(--sumi);box-shadow:var(--shadow)}
.arch-row small{color:var(--muted)}
.arch-row.locked{opacity:.55}
.info-block{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:12px 0;box-shadow:var(--shadow)}
.info-block h4{margin:0 0 6px;color:var(--shu)}
.info-block p{margin:0;font-size:14px}

/* マイページ */
.stats{display:flex;gap:10px;margin-bottom:8px}
.stat{flex:1;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 6px;text-align:center;box-shadow:var(--shadow)}
.stat b{display:block;font-size:20px;color:var(--ai)}
.stat span{font-size:11px;color:var(--muted)}
.sec{font-size:15px;margin:20px 0 8px;padding-left:10px;border-left:4px solid var(--shu)}
.badge-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.badge-item{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;text-align:center;opacity:.55;box-shadow:var(--shadow)}
.badge-item.got{opacity:1;border-color:var(--kin);background:#fffdf3}
.badge-icon{font-size:30px}
.badge-name{font-weight:800;font-size:13.5px;margin-top:4px}
.badge-desc{font-size:11px;color:var(--muted);margin-top:2px}
.mypage-actions{margin-top:18px}

/* タブバー */
#tabbar{position:fixed;bottom:0;left:0;right:0;height:calc(var(--tab-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);max-width:520px;margin:0 auto;
  background:#fff;border-top:1px solid var(--line);display:flex;z-index:30;box-shadow:0 -4px 16px rgba(0,0,0,.06)}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  text-decoration:none;color:var(--muted);font-size:11px}
.tab span{font-size:21px;filter:grayscale(.3)}
.tab.active{color:var(--shu)}
.tab.active span{filter:none;transform:translateY(-1px)}

/* モーダル / 結果 */
.modal-wrap{position:fixed;inset:0;background:rgba(20,25,35,.55);display:flex;align-items:center;justify-content:center;
  z-index:50;padding:20px;animation:fade .2s}
@keyframes fade{from{opacity:0}}
.modal-card{background:var(--paper);border-radius:18px;padding:22px;max-width:420px;width:100%;
  box-shadow:0 20px 60px rgba(0,0,0,.4);border:2px solid var(--kin);max-height:88vh;overflow:auto}
.modal-card h3{margin:0 0 10px}
.result{text-align:center}
.result-face{font-size:52px}
.result-title{font-size:22px;font-weight:800;margin:6px 0}
.result.correct .result-title{color:var(--midori)}
.result.wrong .result-title{color:var(--shu)}
.result .buddy{text-align:left}
.fragment-get{background:var(--kin);color:var(--sumi);font-weight:800;border-radius:10px;padding:10px;margin:12px 0}
.ending-word{font-size:34px;font-weight:800;color:var(--shu);letter-spacing:.15em;margin:14px 0}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14px}
.small{font-size:13px;color:var(--muted)}

/* トースト */
.toast{position:fixed;left:50%;bottom:calc(var(--tab-h) + 18px);transform:translate(-50%,20px);
  background:var(--sumi);color:#fff;padding:11px 18px;border-radius:999px;font-size:13.5px;z-index:60;
  opacity:0;transition:.35s;box-shadow:var(--shadow);max-width:90%;text-align:center;border:1px solid var(--kin)}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* 紙吹雪 */
.confetti{position:fixed;inset:0;pointer-events:none;z-index:55;overflow:hidden}
.confetti i{position:absolute;top:-10px;width:9px;height:14px;opacity:.9;animation:fall 1.6s ease-in forwards}
@keyframes fall{to{transform:translateY(105vh) rotate(540deg);opacity:0}}

@media (prefers-color-scheme:dark){
  body{background:#161b26}
  #app{background:#1d2431}
  .buddy-text,.card,.btn,.file-row,.arch-row,.info-block,.stat,.badge-item,.ar-reveal{background:#232c3d;color:#ece6d6;border-color:#33405a}
  .btn{color:#ece6d6}
  .btn.ghost{color:#b9b2a0}
  .puzzle-card{background:#2a3242}
  .answer-box input,.arrive-alt input{background:#1d2431;color:#fff;border-color:#c9a227}
  .modal-card{background:#232c3d;color:#ece6d6}
  .file-name{color:#ece6d6}
  .arch-row{color:#ece6d6}
}