:root{
  --green:#2f5d3a; --green2:#3f7a4c; --matcha:#8fb35a; --gold:#e3a42b;
  --ink:#1f2a22; --sub:#5d6b60; --bg:#f6f4ec; --card:#fff; --line:#e3e0d3;
  --red:#c0392b; --blue:#2a6fdb;
  --bar-h:52px; --tabs-h:58px;
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden}
body{font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP","Yu Gothic",sans-serif;color:var(--ink);background:var(--bg);-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer}
[hidden]{display:none!important}

/* ヘッダー */
.bar{position:fixed;top:0;left:0;right:0;height:var(--bar-h);display:flex;align-items:center;gap:10px;padding:0 12px;background:var(--green);color:#fff;z-index:1000;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.brand{font-weight:800;font-size:16px;white-space:nowrap;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.beta-tag{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:6px;border:1px solid rgba(255,255,255,.7);color:#fff;font-size:10px;vertical-align:2px}
.beta-note{margin:-4px 0 10px;font-size:12px;color:#7a5b00;background:#fff6d6;border-radius:8px;padding:6px 8px}
.demo-tag{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:6px;background:var(--gold);color:#3a2a00;font-size:11px;vertical-align:2px}
.lv{display:flex;flex-direction:column;align-items:stretch;gap:3px;background:none;border:0;padding:0;width:74px}
.lv-num{font-size:12px;line-height:1;text-align:left}
.lv-num b{font-size:16px;margin-left:2px}
.lv-bar{height:5px;border-radius:3px;background:rgba(255,255,255,.25);overflow:hidden}
.lv-bar i{display:block;height:100%;width:0;background:var(--matcha);transition:width .5s}
.pts{display:flex;align-items:baseline;gap:2px;background:rgba(0,0,0,.2);padding:4px 10px;border-radius:14px}
.pts b{font-size:18px;font-variant-numeric:tabular-nums}
.pts small{font-size:11px}

/* 地図 */
#map{position:fixed;top:var(--bar-h);left:0;right:0;bottom:calc(var(--tabs-h) + var(--safe-b));z-index:1;background:#e8ecdf}
.leaflet-control-attribution{font-size:10px}

/* スポットのマーカー */
.spot{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;background:#fff;border:3px solid var(--blue);box-shadow:0 2px 6px rgba(0,0,0,.3);transition:transform .2s}
.spot.feat{width:42px;height:42px;font-size:22px;border-color:var(--gold);background:#fff8e6;box-shadow:0 0 0 4px rgba(227,164,43,.3),0 2px 6px rgba(0,0,0,.3)}
.spot.shop{width:50px;height:50px;font-size:26px;border-color:#d23a2e;background:#fff3e0;position:relative;box-shadow:0 0 0 4px rgba(210,58,46,.28),0 2px 6px rgba(0,0,0,.3)}
.spot.shop::after{content:'当店';position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:#d23a2e;color:#fff;font-size:11px;font-weight:800;line-height:1;padding:3px 6px;border-radius:8px;white-space:nowrap;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.shop-links{display:flex;gap:6px;flex-wrap:wrap}
.shop-links .btn{text-decoration:none}
.spot.near{transform:scale(1.15);animation:pulse 1.2s infinite}
.spot.visited{border-color:var(--matcha)}
.spot.cool{border-color:#aaa;background:#eee;filter:grayscale(.9);opacity:.75;animation:none}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(42,111,219,.6),0 2px 6px rgba(0,0,0,.3)}50%{box-shadow:0 0 0 10px rgba(42,111,219,0),0 2px 6px rgba(0,0,0,.3)}}

/* プレイヤー */
.me{width:22px;height:22px;border-radius:50%;background:var(--blue);border:4px solid #fff;box-shadow:0 0 0 2px var(--blue),0 2px 8px rgba(0,0,0,.4)}
.me.demo{background:var(--gold);box-shadow:0 0 0 2px var(--gold),0 2px 8px rgba(0,0,0,.4)}

.popup h4{margin:0 0 4px;font-size:15px}
.popup p{margin:2px 0;font-size:12px;color:var(--sub)}
.popup .tag{display:inline-block;padding:1px 6px;border-radius:6px;background:#eef3e6;color:var(--green);font-size:11px;margin-right:4px}
.popup .tag.gold{background:#fff1d1;color:#8a5a00}
.popup .tag.shop{background:#d23a2e;color:#fff}
.popup .ev{margin:4px 0;padding:4px 8px;border-radius:8px;background:#fff6d6;color:#6b4a00;font-size:12px;font-weight:700}
.px-info .popup .ev{background:none;border:1px dashed #ffd54f;color:#ffd54f}
.popup .mb{margin:4px 0;padding:4px 8px;border-radius:8px;background:#e8f3e0;color:#24502c;font-size:12px}
.px-info .popup .mb{background:none;border:1px dashed #8fd18a;color:#cfeec9}
.leaflet-container a.btn{color:#fff}   /* Leaflet の a{color} より強く：当店のポップアップのボタン文字を白に */

.fab-col{position:fixed;right:12px;bottom:calc(var(--tabs-h) + var(--safe-b) + max(170px,calc(var(--sheet-h,0px) + 22px)));z-index:900;display:flex;flex-direction:column;gap:10px}
@media (max-height:600px){.fab-col{flex-direction:row}}   /* 背の低い画面では横に並べて、右上の拡大ボタンと重ならないように */
.fab{width:48px;height:48px;border-radius:50%;border:0;background:#fff;font-size:22px;box-shadow:0 2px 8px rgba(0,0,0,.25)}

/* 下部シート */
.sheet{position:fixed;left:10px;right:10px;bottom:calc(var(--tabs-h) + var(--safe-b) + 10px);z-index:900;background:var(--card);border-radius:16px;padding:10px 12px;box-shadow:0 4px 16px rgba(0,0,0,.2);display:flex;flex-direction:column;gap:8px;max-width:520px;margin:0 auto}
.sheet-top{display:flex;gap:6px;align-items:stretch}
.mode-sw{flex:1;display:flex;gap:4px;background:#eef3e6;border-radius:10px;padding:3px}
.snd-btn{flex:0 0 40px;border:0;border-radius:10px;background:#eef3e6;font-size:16px;padding:0}
.mode-sw button{flex:1;border:0;border-radius:8px;padding:6px 4px;font-size:12px;font-weight:700;background:none;color:var(--sub);white-space:nowrap}
.mode-sw button[aria-pressed="true"]{background:var(--green);color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.status{font-size:13px;color:var(--sub);line-height:1.5}
.status b{color:var(--ink)}
.spin{display:flex;align-items:center;gap:12px;width:100%;border:0;border-radius:14px;padding:10px 12px;background:linear-gradient(135deg,var(--green2),var(--green));color:#fff;text-align:left;box-shadow:0 3px 0 #1f3f27}
.spin:active{transform:translateY(2px);box-shadow:0 1px 0 #1f3f27}
.spin:disabled{filter:grayscale(.7);opacity:.7;transform:none;cursor:default}
.me-wrap{pointer-events:none!important}
.spin.feat{background:linear-gradient(135deg,#f0b843,#d48a10);box-shadow:0 3px 0 #94600a}
.spin-ico{font-size:28px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.2);border-radius:50%;flex:none}
.spin.go .spin-ico{animation:spin .6s linear}
.spin-txt{display:flex;flex-direction:column;min-width:0}
.spin-txt b{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spin-txt small{font-size:12px;opacity:.9}
@keyframes spin{to{transform:rotate(720deg)}}

/* タブ */
.tabs{position:fixed;left:0;right:0;bottom:0;height:calc(var(--tabs-h) + var(--safe-b));padding-bottom:var(--safe-b);display:flex;background:#fff;border-top:1px solid var(--line);z-index:1100}
.tabs button{flex:1;border:0;background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:20px;color:var(--sub)}
.tabs button span{font-size:12px}
.tabs button.on{color:var(--green);font-weight:700}
.tabs button.on span{border-bottom:2px solid var(--green)}

/* パネル */
.panel{position:fixed;top:var(--bar-h);left:0;right:0;bottom:calc(var(--tabs-h) + var(--safe-b));overflow-y:auto;background:var(--bg);z-index:1050;padding:16px 16px 32px}
.panel>*{max-width:640px;margin-left:auto;margin-right:auto}
.panel h2{font-size:20px;margin:0 auto 12px}
.panel h3{font-size:15px;margin:20px auto 8px;color:var(--green)}
.card h3{margin-top:0}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.stat{background:var(--card);border-radius:12px;padding:10px 12px;border:1px solid var(--line)}
.stat small{display:block;font-size:11px;color:var(--sub)}
.stat b{font-size:20px;font-variant-numeric:tabular-nums}
.stat b small{display:inline;font-size:12px;color:var(--sub);margin-left:2px}
.list{list-style:none;margin:0 auto;padding:0;background:var(--card);border-radius:12px;border:1px solid var(--line);overflow:hidden}
.list li{display:flex;align-items:center;gap:10px;padding:10px 12px;border-top:1px solid var(--line);font-size:14px}
.list li:first-child{border-top:0}
.list li .ico{font-size:20px;flex:none;width:26px;text-align:center}
.list li .main{flex:1;min-width:0}
.list li .main b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.list li .main small{color:var(--sub);font-size:12px}
.list li .num{font-weight:700;color:var(--green);white-space:nowrap}
.list li.empty{color:var(--sub);justify-content:center}
.list li.now{background:#f0f6e8}
.badges{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.badge{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 6px;text-align:center}
.badge .bi{font-size:30px;line-height:1.2}
.badge b{display:block;font-size:12px;margin-top:4px}
.badge small{display:block;font-size:11px;color:var(--sub);margin-top:2px;line-height:1.3}
.badge .bp{height:4px;border-radius:2px;background:#eee;margin-top:6px;overflow:hidden}
.badge .bp i{display:block;height:100%;background:var(--matcha)}
.badge.locked .bi{filter:grayscale(1);opacity:.35}
.badge.got{border-color:var(--gold);background:#fffaf0}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:10px}
.card.danger{border-color:#f0c9c4}
.row{display:flex;align-items:center;gap:12px;justify-content:space-between}
.row>span{display:flex;flex-direction:column;min-width:0}
.row small{color:var(--sub);font-size:12px;margin-top:2px;line-height:1.5}
.row input[type=checkbox]{width:44px;height:26px;flex:none;accent-color:var(--green)}
.rules{margin:0;padding-left:1.2em;font-size:13px;line-height:1.7}
.note{font-size:12px;color:var(--sub);line-height:1.7;margin:0}
.credit{font-size:11px;color:var(--sub);text-align:center;line-height:1.7}
.credit a{color:inherit}

.btn{border:0;border-radius:10px;padding:8px 14px;background:var(--green);color:#fff;font-weight:700;white-space:nowrap}
.btn.red{background:var(--red)}
.btn.big{width:100%;padding:14px;font-size:16px;border-radius:14px;box-shadow:0 3px 0 #1f3f27}
.btn.ghost{width:100%;background:none;color:var(--green);margin-top:8px;padding:10px}
.mode-q{margin:14px 0 8px;font-weight:700}
.btn.mode-pick{display:flex;flex-direction:column;align-items:center;gap:2px;white-space:normal}
.btn.mode-pick small{font-size:12px;font-weight:400;opacity:.9}
.btn.mode-pick.alt{margin-top:10px;background:#3a4f8f;box-shadow:0 3px 0 #22305a}
.btn:disabled{opacity:.5}
.btn.mini{margin-top:6px;padding:6px 10px;font-size:12px}

/* はじめに */
.intro{position:fixed;inset:0;z-index:2000;background:rgba(20,35,24,.6);display:flex;align-items:center;justify-content:center;padding:16px}
.intro-box{background:var(--card);border-radius:20px;padding:22px 20px;max-width:400px;width:100%;max-height:100%;overflow-y:auto;text-align:center}
.intro h1{font-size:24px;margin:6px 0 8px;color:var(--green)}
.intro p{font-size:14px;line-height:1.7;margin:6px 0}
.intro ul{text-align:left;font-size:14px;line-height:1.9;padding-left:1.2em;margin:10px 0}
.intro .by{font-size:12px;line-height:1.6;color:var(--sub);margin:4px 0 8px}
.intro .by b{color:var(--ink)}
.intro .warn{font-size:12px;background:#fff4e0;border-radius:10px;padding:8px;color:#7a4b00}

/* 通知 */
.toast{position:fixed;left:50%;top:calc(var(--bar-h) + 12px);transform:translate(-50%,-20px);opacity:0;pointer-events:none;background:rgba(30,40,32,.92);color:#fff;padding:10px 16px;border-radius:12px;font-size:13px;z-index:3000;transition:all .3s;max-width:calc(100% - 32px);text-align:center;line-height:1.5}
.toast.show{opacity:1;transform:translate(-50%,0)}
body.px .toast{top:calc(var(--bar-h) + 52px)}   /* ドット絵の地図では、左上の「めぐった名所」と重ならないよう少し下に */
.reward{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:2500}
.reward .rw{background:#fff;border-radius:20px;padding:18px 24px;text-align:center;box-shadow:0 10px 40px rgba(0,0,0,.35);animation:pop 2.6s ease forwards;min-width:220px;max-width:calc(100% - 40px)}
.reward .rw .big{font-size:40px;font-weight:900;color:var(--gold);line-height:1.1}
.reward .rw .nm{font-weight:700;margin-top:4px}
.reward .rw ul{list-style:none;padding:0;margin:8px 0 0;font-size:13px;color:var(--sub);line-height:1.7}
.reward .rw .lvup{margin-top:8px;font-weight:800;color:var(--green)}
.reward .rw .lvup span{display:inline-block}
.reward .rw.long{animation:popLong 7s ease forwards;max-width:min(360px,calc(100% - 40px))}
.reward .rw .fact{margin:10px 0 0;padding:8px 10px;border-radius:10px;background:#f4f1e6;font-size:13px;line-height:1.6;text-align:left;color:var(--ink)}
@keyframes popLong{0%{transform:scale(.4);opacity:0}4%{transform:scale(1.08);opacity:1}7%{transform:scale(1)}94%{opacity:1}100%{opacity:0;transform:translateY(-30px)}}
.chest-mk{font-size:22px;line-height:30px;text-align:center;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5));animation:hop 1s steps(2) infinite}
@keyframes hop{50%{transform:translateY(-4px)}}
#questList{margin-bottom:14px}
#questList li.done{background:#f3f8ec}
#questList li.done b{color:var(--green)}
#factList li .main small{color:var(--ink);font-size:13px;line-height:1.6}
@keyframes pop{0%{transform:scale(.4);opacity:0}12%{transform:scale(1.08);opacity:1}20%{transform:scale(1)}85%{opacity:1}100%{opacity:0;transform:translateY(-30px)}}

@media (min-width:700px){
  .badges{grid-template-columns:repeat(4,1fr)}
  .stats{grid-template-columns:repeat(4,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .chest-mk{animation:none}
  .spot.near,.spin.go .spin-ico{animation:none}
  .reward .rw{animation:fade 2.6s forwards}
  @keyframes fade{0%,85%{opacity:1}100%{opacity:0}}
  .reward .rw.long{animation:fade 7s forwards}
}

/* 特典 */
.wallet{display:flex;align-items:baseline;gap:6px}
.wallet b{font-size:28px;color:var(--green);font-variant-numeric:tabular-nums}
.wallet small{color:var(--sub);font-size:12px}
.list li .num.minus{color:var(--red)}
#eventList li.next{opacity:.75}
#eventList .btn.mini{margin:0;flex:none}
.note.src{font-size:11px;color:var(--sub);line-height:1.6;margin:6px 2px 14px}
.list li .btn{font-size:13px;padding:7px 12px}
.list li .btn:disabled{background:#c9cfc6;opacity:1;font-weight:600}
.sample{font-style:normal;font-size:11px;background:#fff1d1;color:#8a5a00;border-radius:6px;padding:1px 6px;margin-left:4px;vertical-align:1px}
.coupon{position:fixed;inset:0;z-index:2600;background:rgba(20,35,24,.75);display:flex;align-items:center;justify-content:center;padding:16px}
.coupon-box{background:#fff;border-radius:20px;padding:22px 18px;max-width:380px;width:100%;text-align:center;border:6px solid var(--gold);max-height:100%;overflow-y:auto}
.coupon[data-state=used] .coupon-box,.coupon[data-state=expired] .coupon-box{border-color:#bbb;filter:grayscale(.6)}
.cp-shop{font-size:13px;color:var(--sub)}
.cp-name{font-size:22px;font-weight:900;margin:6px 0;color:var(--green);line-height:1.4}
.cp-code{font-size:16px;font-weight:700;letter-spacing:2px}
.cp-clock{font-size:34px;font-weight:900;font-variant-numeric:tabular-nums;margin:10px 0 6px}
.cp-band{height:10px;border-radius:5px;background:#eee;overflow:hidden;position:relative}
.cp-band i{position:absolute;top:0;bottom:0;width:30%;background:linear-gradient(90deg,var(--matcha),var(--gold));animation:band 1.6s linear infinite}
.coupon[data-state=used] .cp-band i,.coupon[data-state=expired] .cp-band i{animation:none;display:none}
@keyframes band{from{left:-30%}to{left:100%}}
.cp-state{margin:10px 0;font-weight:700}
.coupon[data-state=valid] .cp-state{color:var(--green)}
.coupon[data-state=used] .cp-state,.coupon[data-state=expired] .cp-state{color:var(--red);font-size:18px}
.cp-staff{border-top:1px dashed var(--line);padding-top:10px;margin-top:6px}
.cp-staff small{display:block;font-size:12px;color:var(--sub);margin-bottom:8px;line-height:1.5}
/* スイッチ */
.row input[type=checkbox]{appearance:none;-webkit-appearance:none;width:50px;height:30px;border-radius:15px;background:#ccd3c9;position:relative;cursor:pointer;transition:background .2s}
.row input[type=checkbox]::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:left .2s}
.row input[type=checkbox]:checked{background:var(--green)}
.row input[type=checkbox]:checked::after{left:23px}
.row input[type=checkbox]:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* ドット絵の地図 */
#pxView{position:fixed;top:var(--bar-h);left:0;right:0;bottom:calc(var(--tabs-h) + var(--safe-b));z-index:2;background:#000;display:none}
body.px #pxView{display:block}
body.px #map{visibility:hidden}
#pxCanvas{width:100%;height:100%;display:block;image-rendering:pixelated;touch-action:manipulation}
.dq{background:#000;color:#fff;border:3px solid #fff;border-radius:6px;box-shadow:0 0 0 3px #000;font-family:"DotGothic16","Hiragino Sans",monospace;padding:10px 12px;line-height:1.7}
.px-msg{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);white-space:pre-line;text-align:center;font-size:15px;max-width:calc(100% - 32px)}
.px-attr{position:absolute;right:4px;bottom:calc(var(--sheet-h,0px) + 10px);font-size:9px;line-height:12px;color:#fff;background:rgba(0,0,0,.5);padding:0 4px;border-radius:3px}
.px-zoom{position:absolute;top:10px;right:10px;display:flex;flex-direction:column;gap:6px}
.px-zoom button,.px-pad button{background:rgba(0,0,0,.72);color:#fff;border:2px solid #fff;border-radius:6px;font-family:"DotGothic16",monospace;font-size:18px;width:40px;height:40px;padding:0;touch-action:none;user-select:none;-webkit-user-select:none}
.px-zoom button:active,.px-pad button:active{background:#333}
.px-pad{position:absolute;left:12px;bottom:max(150px,calc(var(--sheet-h,0px) + 22px));display:grid;grid-template-columns:repeat(3,48px);grid-template-rows:repeat(3,48px);gap:2px}
.px-pad button{width:48px;height:48px}
.px-pad .u{grid-area:1/2}.px-pad .l{grid-area:2/1}.px-pad .r{grid-area:2/3}.px-pad .d{grid-area:3/2}
.px-pad .c{grid-area:2/2;font-size:22px}.px-pad .c.on{background:rgba(31,77,43,.9);border-color:#ffd54f}
.px-info{position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:center;padding:16px;background:rgba(0,0,0,.25)}
.px-info .dq{width:100%;max-width:420px;max-height:70%;overflow-y:auto}
.px-info .popup h4{font-size:17px;margin:0 0 6px;color:#ffd54f}
.px-info .popup p{color:#fff;font-size:14px;margin:2px 0}
.px-info .popup .tag{background:none;border:1px solid #fff;color:#fff;border-radius:3px}
.px-info .popup .tag.gold{border-color:#ffd54f;color:#ffd54f}
.px-info .popup .tag.shop{border-color:#ff8a80;color:#ff8a80}
.px-info .btn{background:#000;border:2px solid #fff;border-radius:4px;font-family:inherit}
.dq-close{display:block;margin:8px 0 0 auto;background:none;border:0;color:#fff;font-family:inherit;font-size:14px}
/* ドット絵表示のときは、下のウィンドウもドラクエ風に */
body.px .sheet{background:#000;color:#fff;border:3px solid #fff;border-radius:6px;box-shadow:0 0 0 3px #000;font-family:"DotGothic16","Hiragino Sans",monospace}
body.px .status{color:#fff;font-size:14px}
body.px .mode-sw{background:none;border:2px solid #fff;border-radius:4px;padding:2px}
body.px .snd-btn{background:none;border:2px solid #fff;border-radius:4px}
body.px .mode-sw button{color:#bbb;font-family:inherit;font-weight:400;border-radius:2px}
body.px .mode-sw button[aria-pressed="true"]{background:#fff;color:#000;box-shadow:none}
body.px .status b{color:#ffd54f;font-weight:400}
body.px .spin{background:#000;border:2px solid #fff;box-shadow:none;border-radius:4px;font-family:inherit}
body.px .spin.feat{background:#000;border-color:#ffd54f;box-shadow:none}
body.px .spin-ico{background:none}
body.px .spin-txt b{font-weight:400}
body.px .spin-txt b::before{content:"▶ "}
body.px .spin:disabled{filter:none;opacity:.6}
body.px .leaflet-control-container{display:none}

body.pxw #pxCanvas{touch-action:none;cursor:grab}

/* 地区ごとのめぐり具合 */
.area-row .bar{display:block;height:6px;margin-top:4px;border-radius:3px;background:#e6e1d3;overflow:hidden}
.area-row .bar i{display:block;height:100%;background:var(--gold)}
.px-info .area-card h4 small{font-size:12px;color:#ddd;margin-left:4px}
.px-info .area-card .catch{color:#ffe9a8}
.px-info .area-card .area-spots{list-style:none;margin:4px 0 6px;padding:0;color:#fff;font-size:13px;columns:2;column-gap:12px}
.px-info .area-card .src{font-size:11px;color:#bbb}
.px-info .area-card .src a{color:#9cd2ff;margin-right:4px}
.intro-box h1.logo{margin:4px 0 12px;line-height:0}
.intro-box h1.logo img{display:block;width:100%;max-width:100%;height:auto;margin:0 auto;image-rendering:pixelated}

/* せまい画面：ポイントが4けたになっても、タイトルと「試作版」が切れないように */
@media (max-width:420px){.brand{font-size:15px}.lv{width:56px}.pts{padding:4px 8px}.pts b{font-size:16px}}
/* はじめの画面やスポットの説明ウィンドウが出ている間は、知らせ（トースト）を下に出して文字に重ねない */
body:has(#intro:not([hidden])) .toast{top:auto;bottom:calc(var(--safe-b) + 24px)}
body:has(#pxInfo:not([hidden])) .toast{top:auto;bottom:calc(var(--tabs-h) + var(--safe-b) + var(--sheet-h,0px) + 24px)}
/* 西尾の人たち（話しかけられる町の人） */
.popup.npc .npc-at{margin:0 0 6px;font-size:12px;color:var(--sub)}
.popup.npc .npc-say{margin:6px 0;font-size:14px;line-height:1.7}
.popup.npc .npc-end{margin:4px 0 0;font-size:11px;color:var(--sub);text-align:right}
.px-info .popup.npc .npc-at,.px-info .popup.npc .npc-end{color:#cfd8dc}
.npc-mk{font-size:22px;line-height:30px;text-align:center;filter:drop-shadow(0 1px 1px rgba(0,0,0,.45))}
.npc-mk:not(.met)::after{content:"💬";position:absolute;right:-10px;top:-12px;font-size:13px}