:root{
  --navy:#0f2f6b;
  --navy-2:#173f88;
  --red:#e23b2e;
  --red-2:#c72d22;
  --ink:#1d2330;
  --paper:#ffffff;
  --cream:#f5f2ea;
  --shadow:0 10px 30px rgba(15,47,107,.18);
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;height:100%;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  color:var(--ink);background:#000;overflow:hidden;
  -webkit-user-select:none;user-select:none;
}
#app{position:fixed;inset:0;overflow:hidden;}

/* ---------- 画面切り替え ---------- */
.screen{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .35s ease;}
.screen.is-active{opacity:1;pointer-events:auto;}

/* ---------- 共通ボタン ---------- */
.btn{
  border:none;border-radius:999px;font-weight:800;font-size:17px;
  padding:16px 24px;cursor:pointer;display:inline-flex;gap:8px;align-items:center;justify-content:center;
  transition:transform .08s ease, box-shadow .2s ease;box-shadow:var(--shadow);
}
.btn:active{transform:scale(.96);}
.btn--primary{background:var(--red);color:#fff;width:min(84%,360px);}
.btn--ghost{background:#fff;color:var(--navy);border:2px solid var(--navy);}
.map-actions{
  position:absolute;left:12px;right:12px;bottom:calc(18px + var(--safe-bottom));z-index:20;
  display:flex;gap:10px;
}
.btn--ar{background:var(--navy);color:#fff;font-size:14px;padding:14px 10px;flex:1;box-shadow:var(--shadow);}
.btn--gmap{background:#1a73e8;color:#fff;font-size:14px;padding:14px 10px;flex:1;box-shadow:var(--shadow);}
.icon-btn{
  width:44px;height:44px;border-radius:50%;border:none;background:rgba(255,255,255,.92);
  color:var(--navy);font-size:22px;font-weight:800;box-shadow:var(--shadow);cursor:pointer;
}
/* 追従OFF中（手で地図を動かした後）＝押せば現在地に戻ることを知らせる */
.icon-btn--alert{
  background:#e23b2e;color:#fff;animation:recenterPulse 1.6s ease-in-out infinite;
}
@keyframes recenterPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(226,59,46,.55);}
  70%{box-shadow:0 0 0 12px rgba(226,59,46,0);}
}

/* ---------- 吹き出し ---------- */
.speech{
  position:relative;background:#fff;border-radius:18px;padding:14px 18px;
  box-shadow:var(--shadow);max-width:78vw;
}
.speech p{margin:0;font-weight:700;line-height:1.5;white-space:pre-line;}
.speech::after{
  content:"";position:absolute;left:50%;bottom:-10px;transform:translateX(-50%);
  border:10px solid transparent;border-top-color:#fff;border-bottom:0;
}

/* ================= 画面1: ようこそ ================= */
#screen-welcome{background:linear-gradient(160deg,var(--navy) 0%,var(--navy-2) 60%,#25529e 100%);}
.welcome-bg{position:absolute;inset:0;
  background:radial-gradient(circle at 50% 22%,rgba(255,255,255,.16),transparent 55%);}
.welcome-inner{position:relative;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:18px;
  padding:calc(24px + var(--safe-top)) 20px calc(24px + var(--safe-bottom));}
/* ---------- キャラクタースロット（2D img / 3D model-viewer 共通） ---------- */
.char-slot{display:flex;align-items:center;justify-content:center;}
.char-slot img{width:100%;height:100%;object-fit:contain;}
.char-slot canvas.char-canvas{width:100%;height:100%;object-fit:contain;display:block;}
.char-slot model-viewer{width:100%;height:100%;--poster-color:transparent;background:transparent;}
.char-slot--hero{width:min(66vw,280px);aspect-ratio:786/600;height:auto;
  filter:drop-shadow(0 16px 24px rgba(0,0,0,.35));}
.char-slot--hero:not(.char-slot--jump){animation:floaty 3.4s ease-in-out infinite;}
/* 動画クリップ自体に動きがあるので、CSSの上下揺れ(floaty/jump)は二重になり“画面が揺れる”原因に→動画時は止める */
.char-slot--hero:has(canvas.char-canvas){animation:none;}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.char-slot--jump{animation:jump 1s ease-in-out infinite;}
@keyframes jump{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
/* ナレパンは喋らないので吹き出しは使わず、素のリード文で置く */
.welcome-lead{color:#fff;font-size:clamp(15px,4.4vw,19px);font-weight:800;margin:4px 0 0;
  text-align:center;line-height:1.6;white-space:pre-line;max-width:88vw;
  text-shadow:0 2px 8px rgba(0,0,0,.28);}
.event-title{color:#fff;font-size:clamp(16px,4.8vw,22px);font-weight:900;margin:2px 0 6px;text-align:center;letter-spacing:0;line-height:1.35;max-width:88vw;overflow-wrap:anywhere;}
.hint-small{color:rgba(255,255,255,.86);font-size:13.5px;margin:2px 0 0;}
.demo-note{margin:10px 16px 0;font-size:12px;font-weight:700;color:#fff;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);
  padding:8px 12px;border-radius:10px;text-align:center;line-height:1.5;max-width:88vw;}

/* ================= 画面2: 地図 ================= */
#map{position:absolute;inset:0;z-index:0;background:#dfe6ee;}
/* Leaflet内部レイヤーが上のUIを覆わないよう、地図パネル/コントロールを地図枠内に閉じ込める */
#map .leaflet-pane,#map .leaflet-top,#map .leaflet-bottom{z-index:1;}
#map .leaflet-control{z-index:2;}
.top-bar{
  position:absolute;top:calc(12px + var(--safe-top));left:12px;right:12px;z-index:15;
  display:flex;align-items:center;gap:10px;
}
.top-bar__dest{
  background:rgba(255,255,255,.94);border-radius:14px;padding:8px 14px;box-shadow:var(--shadow);
  flex:1;display:flex;flex-direction:column;line-height:1.2;
}
.top-bar__label{font-size:11px;color:#7a8290;font-weight:700;}
.top-bar__dest strong{font-size:17px;color:var(--navy);}
.nav-card{
  position:absolute;left:12px;right:12px;bottom:calc(78px + var(--safe-bottom));z-index:15;
  background:#fff;border-radius:20px;box-shadow:var(--shadow);
  display:flex;align-items:center;gap:12px;padding:12px 14px;
}
.char-slot--nav{width:90px;aspect-ratio:786/600;height:auto;flex:none;filter:drop-shadow(0 4px 6px rgba(0,0,0,.15));}
.nav-card__body{flex:1;min-width:0;}
.nav-card__hint{margin:0 0 8px;font-weight:800;color:var(--navy);font-size:17px;line-height:1.35;}
.nav-card__stats{display:flex;gap:16px;}
.nav-card__stats div{display:flex;flex-direction:column;line-height:1.1;}
.nav-card__stats b{font-size:22px;color:var(--red);font-weight:900;}
.nav-card__stats small{font-size:12px;color:#7a8290;font-weight:700;}

/* Leaflet マーカー(現在地) */
.me-dot{width:20px;height:20px;background:var(--navy);border:3px solid #fff;border-radius:50%;
  box-shadow:0 0 0 6px rgba(15,47,107,.2);position:relative;}
/* 自分の向き（Googleマップの扇）。コンパス、無ければGPS進行方向で回す */
.me-cone{position:absolute;left:50%;top:50%;width:26px;height:26px;opacity:0;
  transform-origin:50% 100%;transform:translate(-50%,-100%);pointer-events:none;
  background:conic-gradient(from -22deg,rgba(26,115,232,.55),rgba(26,115,232,0) 44deg);
  clip-path:polygon(50% 100%,0 0,100% 0);transition:opacity .3s;}
.me-raw{width:14px;height:14px;background:rgba(120,130,150,.55);border:2px solid #fff;border-radius:50%;}
.leaflet-control-attribution{font-size:9px;opacity:.6;}

/* ================= 画面3: AR ================= */
#screen-ar{background:#000;}
#ar-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.ar-overlay{position:absolute;inset:0;z-index:5;}
.ar-mapbtn{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(18px + var(--safe-bottom));z-index:30;
  background:rgba(255,255,255,.96);color:var(--navy);border:none;border-radius:999px;
  padding:14px 24px;font-size:15px;font-weight:800;box-shadow:var(--shadow);cursor:pointer;}
.ar-mapbtn:active{transform:translateX(-50%) scale(.96);}

/* ---- 上部の情報は「1本の縦積み」にする ----
   旧実装は .ar-turn と .ar-warn がどちらも top:0 で同じ場所を取り合っていた
   （＝逆走警告が出ると曲がり角の案内が消える／表示がダブって見える）。
   ここに積むことで、警告・案内・状態表示が上から順に並ぶ。 */
.ar-top{
  position:absolute;top:0;left:0;right:0;z-index:25;
  display:flex;flex-direction:column;
  padding-top:var(--safe-top);
  pointer-events:none;
}
.ar-top > *{pointer-events:auto;}

/* ---- 次の曲がり角カード（Googleマップの上バー相当）----
   360°回るコンパス矢印は廃止。「次の操作」だけを大きく1つ出す。 */
.ar-turn{
  display:flex;align-items:center;gap:14px;
  background:var(--navy);color:#fff;
  padding:12px 16px 14px;
  box-shadow:0 3px 14px rgba(0,0,0,.35);
}
.ar-turn.is-now{background:#1a73e8;}         /* 直前になったら色を変えて「今だよ」 */
.ar-turn__icon{width:52px;height:52px;flex:none;color:#fff;
  display:flex;align-items:center;justify-content:center;}
.ar-turn__icon .turn-svg{width:100%;height:100%;display:block;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.35));}
.ar-turn__body{min-width:0;display:flex;flex-direction:column;line-height:1.25;}
.ar-turn__dist{font-size:26px;font-weight:900;letter-spacing:-.5px;}
.ar-turn__text{font-size:16px;font-weight:800;opacity:.95;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ar-turn__then{font-size:12.5px;font-weight:700;opacity:.75;margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ---- 逆走・ルート外れの警告（.ar-top の中で案内カードの上に積む）---- */
.ar-warn{
  display:flex;align-items:center;gap:12px;
  background:#e23b2e;color:#fff;font-weight:900;font-size:15px;line-height:1.4;
  padding:12px 16px 14px;
  box-shadow:0 3px 14px rgba(0,0,0,.35);
  animation:warnpulse 1.4s ease-in-out infinite;
}
.ar-warn__icon{font-size:24px;flex:none;}
@keyframes warnpulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.25)}}

/* ---- 状態表示（GPSが弱い／ルーター障害で簡易案内中）----
   黙って精度が落ちるのが最悪なので、隠さず小さく出す。 */
.status-chip{
  font-size:13px;font-weight:800;line-height:1.4;text-align:center;
  background:rgba(20,24,32,.86);color:#ffd98a;padding:6px 10px;
}
.status-chip--ar{border-radius:0 0 12px 12px;margin:0 auto;box-shadow:0 3px 10px rgba(0,0,0,.3);}

/* ---- キャラの左右位置（進むべき方向に寄る）----
   app.js が --ar-aim を -1(左いっぱい)〜0(正面)〜+1(右いっぱい) で更新する。
   ★振り幅の上限 --ar-char-shift-max は動画フレームの全フレーム実測から決めた値：
       point_right … 指先の右余白 14.2%
       point_left  … 指先の左余白 13.5%
     スロット幅は min(94vw,392px) なので、390px画面での余裕は 右63.8px / 左61.2px。
     安全側に min(14vw,56px) を上限とする。ここを超えると指先が画面外で切れる。
   もっと大きく振りたい場合は、まず動画側の余白を増やしてからこの1行を変える。 */
.ar-char-wrap{
  --ar-char-shift-max:min(14vw,56px);
  --ar-aim:0;
  position:absolute;left:50%;
  transform:translateX(calc(-50% + var(--ar-aim) * var(--ar-char-shift-max)));
  bottom:calc(46px + var(--safe-bottom));
  display:flex;flex-direction:column;align-items:center;gap:8px;
  /* 方位センサーは細かく震えるので、CSS側でも動きをなめらかにする（JS側でも平滑化済み） */
  transition:transform .45s cubic-bezier(.22,.61,.36,1);
}
/* 足元の接地影（方向を持たない真下のAO影＝どんな光でも成立）。控えめ。
   不要なら display:none にするだけでOK。 */
.ar-char-wrap::after{
  content:"";position:absolute;bottom:2px;left:50%;transform:translateX(-50%);
  width:40%;height:11px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(0,0,0,.38),rgba(0,0,0,.2) 45%,rgba(0,0,0,0) 72%);
  filter:blur(2px);pointer-events:none;z-index:-1;
}
/* スロットを動画と同じ横長比率に＝上下の透明余白をなくし足元をスロット底に合わせる。
   足元支点でごく僅かに重心移動＝接地したまま“先導”雰囲気（上下に浮かせない） */
.char-slot--ar{width:min(94vw,392px);aspect-ratio:786/600;height:auto;
  filter:drop-shadow(0 5px 7px rgba(0,0,0,.35));
  transform-origin:50% 100%;animation:leadsway 3.2s ease-in-out infinite;}
@keyframes leadsway{
  0%,100%{transform:rotate(-1.1deg)}
  50%    {transform:rotate(1.1deg)}
}
/* ---- 残り距離・所要・到着予定（曲がり角カードの真下に帯で置く）----
   ★2026-07-28 実地の指摘で「下 → 上」へ移した。
     旧実装は左下に大きな文字で置いていたが、
      ・中央下の「地図に切り替え」ボタンと近すぎる
      ・ナレパンが左へスライドすると文字と重なる
     ため、Googleマップの上バーに寄せて曲がり角カードと一体化させた。
     結果、画面下に残るのは「地図に切り替え」と小さな操作ボタン2つだけ。 */
.ar-trip{
  display:flex;align-items:baseline;gap:10px;
  background:rgba(11,26,56,.94);color:#fff;
  padding:7px 16px 9px;
  box-shadow:0 3px 12px rgba(0,0,0,.3);
}
.ar-dist{font-size:23px;font-weight:900;line-height:1;letter-spacing:-.5px;flex:none;}
.ar-eta{font-size:13.5px;font-weight:800;opacity:.92;flex:none;}
.ar-dest{font-size:12.5px;opacity:.75;font-weight:700;margin-left:auto;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:42%;}

/* ================= 画面4: 到着 ================= */
#screen-arrive{background:linear-gradient(160deg,#e23b2e 0%,#f06a2f 100%);}
.arrive-bg{position:absolute;inset:0;background:radial-gradient(circle at 50% 30%,rgba(255,255,255,.2),transparent 55%);}
.arrive-inner{position:relative;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:20px;padding:24px;}
.speech--arrive p{color:var(--red);font-size:18px;text-align:center;}

/* ================= トースト ================= */
.toast{
  position:fixed;left:50%;bottom:calc(30px + var(--safe-bottom));transform:translateX(-50%) translateY(20px);
  background:rgba(20,24,32,.92);color:#fff;padding:12px 18px;border-radius:12px;font-size:13px;font-weight:700;
  max-width:86vw;text-align:center;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;z-index:100;white-space:pre-line;
}
.toast.is-show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ================= 歩きスマホ注意モーダル ================= */
.modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  background:rgba(10,16,30,.72);padding:24px;backdrop-filter:blur(3px);}
.modal.is-active{display:flex;}
.modal__box{background:#fff;border-radius:24px;padding:28px 24px;max-width:340px;width:100%;
  text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.4);animation:pop .3s ease;}
@keyframes pop{from{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}
.modal__icon{font-size:44px;margin-bottom:6px;}
.modal__box h2{color:var(--red);font-size:20px;font-weight:900;margin:4px 0 12px;line-height:1.35;}
.modal__box p{color:var(--ink);font-size:15px;line-height:1.6;font-weight:600;margin:0 0 22px;white-space:pre-line;}
.modal__box .btn{width:100%;}

/* ================= 地図の常時注意バー＋状態表示 =================
   注意帯とGPS状態は縦に積む（上部で位置が競合しないように） */
.map-chips{
  position:absolute;left:12px;right:12px;top:calc(66px + var(--safe-top));z-index:16;
  display:flex;flex-direction:column;gap:6px;
}
.map-caution{
  background:rgba(226,59,46,.94);color:#fff;font-size:13px;font-weight:800;text-align:center;
  padding:7px 10px;border-radius:10px;box-shadow:var(--shadow);
}
.map-chips .status-chip{border-radius:10px;box-shadow:var(--shadow);}

/* ================= 「着いた」ボタン／音声ON-OFF ================= */
/* 到着はGPSの半径判定だけに頼らない（屋内・木の下で入らないことがある）。
   目的地の近く(config.manualArriveMeters)に入ったら出す。 */
.pill-arrive{
  border:none;border-radius:999px;background:#0f9d58;color:#fff;
  font-size:15px;font-weight:900;padding:12px 20px;box-shadow:var(--shadow);cursor:pointer;
  animation:arrivePulse 1.8s ease-in-out infinite;
}
.pill-arrive:active{transform:scale(.96);}
@keyframes arrivePulse{
  0%,100%{box-shadow:0 0 0 0 rgba(15,157,88,.5),var(--shadow);}
  70%{box-shadow:0 0 0 14px rgba(15,157,88,0),var(--shadow);}
}
#btn-arrived-map{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:calc(182px + var(--safe-bottom));z-index:18;
}
#btn-arrived-map:active{transform:translateX(-50%) scale(.96);}
/* AR画面の左下。残り距離を上へ移したので、ボタンだけを低い位置に置ける。
   （「地図に切り替え」は bottom:18px・高さ約48px なので 84px あれば重ならない） */
.ar-tools{
  position:absolute;left:12px;bottom:calc(84px + var(--safe-bottom));z-index:30;
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;
}
.icon-btn.is-off{background:rgba(255,255,255,.72);color:#8a929e;}

/* ================= 権限の説明シート =================
   許可を無言で3連射するのをやめ、意味を1枚で説明してから聞く。 */
.perm-box{text-align:left;}
.modal__box h2.perm-title{color:var(--navy);font-size:19px;font-weight:900;margin:0 0 14px;text-align:center;line-height:1.4;}
.perm-list{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:12px;}
.perm-list li{display:grid;grid-template-columns:36px 1fr;grid-template-rows:auto auto;
  column-gap:10px;align-items:center;}
.perm-ico{grid-row:1 / span 2;font-size:26px;text-align:center;}
.perm-list b{font-size:15px;color:var(--navy);font-weight:900;}
.perm-list small{font-size:12.5px;color:#5a6273;font-weight:600;line-height:1.45;}
.perm-note{font-size:12px;color:#7a8290;line-height:1.55;margin:0 0 16px;
  background:#f4f6fa;border-radius:10px;padding:9px 11px;font-weight:600;}
.perm-box .btn{width:100%;}
.perm-alt{margin-top:9px;font-size:14px;padding:12px 18px;}

/* ================= QRが読めなかった画面 ================= */
#screen-qrerror{background:linear-gradient(160deg,#3a4657 0%,#232b38 100%);}
.qrerror-inner{position:relative;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;padding:28px 24px;text-align:center;}
.qrerror-icon{font-size:52px;}
.qrerror-title{color:#fff;font-size:20px;font-weight:900;margin:0;line-height:1.4;max-width:88vw;}
.qrerror-text{color:rgba(255,255,255,.9);font-size:15px;font-weight:700;line-height:1.7;
  margin:0 0 6px;white-space:pre-line;max-width:88vw;}
.qrerror-note{color:rgba(255,255,255,.66);font-size:12.5px;font-weight:600;margin:4px 0 0;line-height:1.6;}

/* ================= 位置情報の救済バナー =================
   「現在地を取得中…」で無限に固まらせない。原因・対処・逃げ道を必ず出す。
   AR画面と地図画面のどちらでも同じ位置に出したいので #app の外に置いている。 */
.geo-rescue{
  position:fixed;left:10px;right:10px;bottom:calc(96px + var(--safe-bottom));z-index:150;
  background:rgba(226,59,46,.97);color:#fff;border-radius:14px;padding:13px 14px 12px;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  animation:rescueIn .3s ease;
}
@keyframes rescueIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.geo-rescue__close{
  position:absolute;top:6px;right:6px;width:30px;height:30px;border:none;border-radius:50%;
  background:rgba(255,255,255,.2);color:#fff;font-size:15px;font-weight:900;cursor:pointer;
}
.geo-rescue__head{font-size:15px;font-weight:900;margin:0 34px 5px 0;}
.geo-rescue__text{font-size:13px;font-weight:600;line-height:1.65;margin:0 0 11px;white-space:pre-line;}
.geo-rescue__btns{display:flex;gap:8px;flex-wrap:wrap;}
.geo-rescue__btn{
  flex:1;min-width:130px;border:none;border-radius:999px;padding:11px 12px;
  font-size:13.5px;font-weight:900;cursor:pointer;
  background:rgba(255,255,255,.22);color:#fff;
}
.geo-rescue__btn--main{background:#fff;color:var(--red);}
.geo-rescue__btn:active{transform:scale(.97);}

/* ================= 管理者画面 ================= */
html{overflow-x:clip;}
body.admin{background:var(--cream);overflow-x:clip;overflow-y:auto;height:auto;position:static;width:100%;}
body.admin *{min-width:0;}
.adm-header{position:sticky;top:0;z-index:30;background:var(--navy);color:#fff;
  display:flex;align-items:center;gap:10px;padding:calc(12px + var(--safe-top)) 16px 12px;}
.adm-header h1{font-size:16px;margin:0;font-weight:900;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.adm-badge{margin-left:auto;background:var(--red);font-size:11px;font-weight:800;padding:4px 10px;border-radius:999px;}
.adm-main{max-width:640px;margin:0 auto;padding:16px 14px 60px;display:flex;flex-direction:column;gap:16px;}
.adm-card{background:#fff;border-radius:18px;box-shadow:var(--shadow);padding:16px;}
.adm-card h2{font-size:16px;margin:0 0 12px;color:var(--navy);display:flex;align-items:center;gap:8px;}
.adm-step{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;
  background:var(--red);color:#fff;border-radius:50%;font-size:13px;font-weight:900;}
.adm-field{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:700;color:#4a5262;margin-bottom:12px;}
.adm-field input{border:2px solid #dfe3ea;border-radius:10px;padding:11px 12px;font-size:16px;font-weight:600;}
.adm-field input:focus{outline:none;border-color:var(--navy);}
.adm-help{font-size:13px;line-height:1.6;color:#5a6273;margin:0 0 12px;}
.adm-modes{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px;}
.adm-mode,.adm-sub{border:2px solid var(--navy);background:#fff;color:var(--navy);border-radius:999px;
  padding:9px 14px;font-size:13px;font-weight:800;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;}
.adm-mode.is-on{background:var(--navy);color:#fff;}
.adm-sub{border-color:#c7cdd8;color:#4a5262;font-size:12px;padding:8px 12px;}
.adm-sub:active,.adm-mode:active{transform:scale(.96);}
#btn-record.is-rec{background:var(--red);border-color:var(--red);color:#fff;animation:recpulse 1s infinite;}
@keyframes recpulse{0%,100%{opacity:1}50%{opacity:.6}}
.adm-search{display:flex;gap:8px;margin-bottom:10px;}
.adm-search input{flex:1;border:2px solid #dfe3ea;border-radius:10px;padding:11px 12px;font-size:16px;font-weight:600;}
.adm-search input:focus{outline:none;border-color:var(--navy);}
.adm-search .adm-sub{border-color:var(--navy);color:var(--navy);white-space:nowrap;}
.search-results{display:flex;flex-direction:column;gap:6px;margin-bottom:10px;}
.search-results:empty{display:none;}
.search-item{text-align:left;background:#f2f5fa;border:1px solid #dfe3ea;border-radius:10px;
  padding:10px 12px;font-size:13px;font-weight:700;color:var(--navy);cursor:pointer;
  display:flex;flex-direction:column;gap:2px;width:100%;}
.search-item small{font-size:11px;font-weight:600;color:#7a8290;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.search-item:active{background:#e6ecf5;}
.search-empty{margin:0 0 10px;font-size:12px;line-height:1.6;color:#7a8290;
  background:#f7f8fb;border:1px dashed #dfe3ea;border-radius:10px;padding:10px 12px;}
.search-pin{font-size:28px;transform:translate(-6px,-24px);filter:drop-shadow(0 2px 3px rgba(0,0,0,.4));}

/* ---- かんたん作成（出発地／目的地）---- */
.adm-od{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.adm-od__label{flex:none;width:52px;font-size:12px;font-weight:800;color:#5a6273;}
.adm-od input{flex:1;min-width:0;border:2px solid #dfe3ea;border-radius:10px;
  padding:11px 12px;font-size:16px;font-weight:600;}
.adm-od input:focus{outline:none;border-color:var(--navy);}
.adm-od .adm-sub{flex:none;border-color:var(--navy);color:var(--navy);padding:9px 11px;font-size:15px;}
.adm-picked{margin:0 0 8px 60px;font-size:12px;font-weight:800;color:#1a73e8;line-height:1.5;}
.adm-note{background:#fff8e6;border:1px solid #f0dca8;border-radius:10px;padding:10px 12px;color:#6b5a2a;}
/* 案内のしかた（記録どおり / 道なり）の選択 */
.adm-radio{display:flex;flex-direction:column;gap:8px;margin-bottom:12px;}
.adm-radio label{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;
  border:2px solid #dfe3ea;border-radius:12px;background:#fff;cursor:pointer;line-height:1.5;}
.adm-radio label:has(input:checked){border-color:#1a73e8;background:#f2f7ff;}
.adm-radio input{margin-top:3px;width:20px;height:20px;flex:none;accent-color:#1a73e8;}
.adm-radio small{color:#5a6273;font-size:12.5px;}
/* QRが印刷して読めるかの一覧 */
.adm-print-info{margin:0 0 12px;}
.adm-print-info .adm-help{margin-bottom:6px;}
.adm-qrtable{width:100%;border-collapse:collapse;font-size:12.5px;margin:0 0 8px;}
.adm-qrtable td{padding:6px 8px;border-bottom:1px solid #eef0f4;color:#3c4453;}
.adm-qrtable td:last-child{text-align:right;font-weight:700;color:#1e7a3c;white-space:nowrap;}
.adm-qrtable tr.is-bad td{color:#8c2b22;background:#fdf1ef;}
.adm-qrtable tr.is-bad td:last-child{color:#c0392b;}
.adm-acc{display:inline-block;margin-left:6px;font-size:11px;font-weight:800;color:#1a73e8;}
/* admin地図の現在地（青丸） */
.adm-me{width:18px;height:18px;border-radius:50%;background:#1a73e8;border:3px solid #fff;
  box-shadow:0 0 0 6px rgba(26,115,232,.2);}
/* #adm-map は全画面モーダル側で指定（下の「管理者：地図モーダル」を参照） */
.adm-stats{display:flex;flex-wrap:wrap;gap:14px;font-size:13px;color:#5a6273;font-weight:700;}
.adm-stats b{color:var(--navy);}
.adm-make{width:100%;}
.adm-qr{margin-top:16px;text-align:center;}
.adm-qrbox{display:flex;justify-content:center;padding:14px;background:#fff;border-radius:12px;}
.adm-qrbox img{width:220px;height:220px;image-rendering:pixelated;}
.adm-urlrow{display:flex;gap:8px;margin:8px 0 12px;}
.adm-urlrow input{flex:1;border:2px solid #dfe3ea;border-radius:10px;padding:9px 11px;font-size:12px;color:#4a5262;}
.wp-pin{width:26px;height:26px;border-radius:50%;background:var(--red);color:#fff;font-weight:900;font-size:13px;
  display:flex;align-items:center;justify-content:center;border:2px solid #fff;box-shadow:0 2px 5px rgba(0,0,0,.3);}
.goal-pin{font-size:30px;transform:translate(-6px,-26px);filter:drop-shadow(0 2px 3px rgba(0,0,0,.4));}

/* confetti */
.confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none;}
.confetti i{position:absolute;top:-10px;width:9px;height:14px;opacity:.9;animation:fall linear infinite;}
@keyframes fall{to{transform:translateY(110vh) rotate(540deg);}}

/* =====================================================================
 *  管理者画面 追加分（2026-07-27）
 *   ・パスコードの簡易ロック
 *   ・自動保存の復元バー／名前付き保存の一覧
 *   ・地図の全画面モーダル（カード内の地図はスマホでスクロールを妨げるため）
 *   ・印刷用ポスター（画面プレビュー＋印刷ダイアログからPDF保存）
 * ===================================================================== */

/* ---- パスコード ---- */
.adm-gate{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,var(--navy) 0%,var(--navy-2) 100%);padding:24px;}
.adm-gate[hidden]{display:none;}
.adm-gate__box{background:#fff;border-radius:22px;padding:28px 22px 22px;max-width:360px;width:100%;
  text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.4);}
.adm-gate__logo{font-size:40px;line-height:1;}
.adm-gate__box h1{font-size:19px;color:var(--navy);margin:10px 0 6px;font-weight:900;}
.adm-gate__lead{font-size:13.5px;color:#5a6273;margin:0 0 16px;font-weight:600;line-height:1.6;}
.adm-gate__box input[type=password]{width:100%;border:2px solid #dfe3ea;border-radius:12px;
  padding:13px 14px;font-size:17px;font-weight:700;text-align:center;letter-spacing:2px;margin-bottom:10px;}
.adm-gate__box input[type=password]:focus{outline:none;border-color:var(--navy);}
.adm-gate__box .btn{width:100%;}
.adm-gate__err{color:var(--red);font-size:13px;font-weight:800;margin:0 0 10px;}
.adm-gate__remember{display:flex;align-items:center;justify-content:center;gap:7px;
  font-size:12.5px;color:#5a6273;font-weight:700;margin-top:12px;cursor:pointer;}
.adm-gate__note{font-size:11.5px;color:#8a929e;line-height:1.6;margin:14px 0 0;text-align:left;
  background:#f7f8fb;border-radius:10px;padding:10px 12px;}
#adm-app[hidden]{display:none;}

/* ---- 前回の続きを復元するバー ---- */
.adm-draft{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:#fff8e6;border:1px solid #f0dca8;border-radius:14px;padding:12px 14px;}
.adm-draft[hidden]{display:none;}
.adm-draft__text{flex:1;min-width:150px;display:flex;flex-direction:column;line-height:1.4;}
.adm-draft__text b{font-size:14px;color:#6b5a2a;}
.adm-draft__text small{font-size:12px;color:#8a7c50;font-weight:700;}
.adm-draft__btns{display:flex;gap:8px;}

/* ---- 保存済みルートの一覧 ---- */
.adm-sub-h{font-size:13.5px;color:var(--navy);font-weight:900;margin:18px 0 6px;
  padding-top:14px;border-top:1px solid #eceff4;}
.adm-slots{display:flex;flex-direction:column;gap:7px;margin-bottom:6px;}
.adm-slot{display:flex;align-items:center;gap:8px;background:#f2f5fa;border:1px solid #dfe3ea;
  border-radius:10px;padding:9px 11px;}
.adm-slot__main{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35;}
.adm-slot__main b{font-size:13.5px;color:var(--navy);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.adm-slot__main small{font-size:11px;color:#7a8290;font-weight:700;}
.adm-sub--go{border-color:#0f9d58;color:#0f9d58;font-weight:900;}
.adm-sub--danger{border-color:#e0a49e;color:var(--red);}
.adm-sub:disabled{opacity:.35;}

/* ---- 全画面モーダル（地図編集・ポスター）---- */
body.admin.is-modal{overflow:hidden;}
.adm-modal{position:fixed;inset:0;z-index:320;background:var(--cream);
  display:flex;flex-direction:column;}
.adm-modal[hidden]{display:none;}
.adm-modal__head{flex:none;display:flex;align-items:center;gap:10px;background:var(--navy);color:#fff;
  padding:calc(9px + var(--safe-top)) 12px 9px;}
.adm-modal__title{font-size:15px;font-weight:900;flex:1;text-align:center;}
.adm-modal__close{border:none;background:rgba(255,255,255,.18);color:#fff;border-radius:999px;
  padding:8px 14px;font-size:13px;font-weight:800;cursor:pointer;}
.adm-modal__undo{display:flex;gap:6px;}
.adm-modal__undo .adm-sub{background:rgba(255,255,255,.18);border-color:transparent;color:#fff;
  font-size:16px;padding:6px 12px;}
.adm-modal__bar{flex:none;display:flex;gap:7px;padding:9px 10px;overflow-x:auto;background:#fff;
  border-bottom:1px solid #e6eaf0;}
.adm-modal__bar>*{flex:none;}
.adm-modal__search{flex:none;padding:8px 10px 0;margin:0;}
.adm-modal__results{flex:none;max-height:32vh;overflow-y:auto;padding:0 10px;margin:6px 0 0;}
#adm-map{flex:1;min-height:0;background:#dfe6ee;}
.adm-modal__foot{flex:none;background:#fff;border-top:1px solid #e6eaf0;
  padding:8px 10px calc(8px + var(--safe-bottom));}
.adm-stats--modal{font-size:12px;margin-bottom:7px;gap:12px;}
.adm-modes--foot{margin-bottom:0;gap:7px;overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px;}
.adm-modes--foot>*{flex:none;}

/* ---- 印刷用ポスター（画面プレビュー）---- */
.poster-hint{margin:8px 12px;background:#fff8e6;border:1px solid #f0dca8;border-radius:10px;
  padding:9px 11px;color:#6b5a2a;font-size:12.5px;}
.poster-actions{padding:0 12px 10px;display:flex;justify-content:center;}
.poster-actions .btn{width:min(100%,340px);}
.poster-scroll{flex:1;min-height:0;overflow:auto;background:#39404d;padding:12px;
  display:flex;justify-content:flex-start;align-items:flex-start;}
#poster{
  /* A4(210mm)から余白8mm×2を引いた印字領域。画面でも実寸で組み、
     入りきらないときだけ admin.js が transform:scale() で縮小する。 */
  width:194mm;height:281mm;flex:none;
  background:#fff;box-shadow:0 8px 30px rgba(0,0,0,.5);
  display:grid;gap:0;transform-origin:top left;
}
#poster[data-layout="a4"]  {grid-template-columns:1fr;grid-template-rows:1fr;}
#poster[data-layout="a6"]  {grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;}
#poster[data-layout="card"]{grid-template-columns:1fr 1fr;grid-template-rows:repeat(5,1fr);}

/* 1枚ぶんのカード。
   ★寸法は mm で持つ。理由＝これは印刷物であり、A4の印字領域(194x281mm)が確定して
     いるので、mmで書けば「画面のプレビュー＝実際の印刷結果」になる。
     最初はコンテナクエリ単位(cqw)で書いたが、container-type に対応していない
     ブラウザでは cqw が「ビューポート幅の%」に化けて文字が巨大化し、
     QRとキャラが押し出されて消えた（プレビューで実際に発生）。mmなら起きない。
   各レイアウトは基準の font-size だけ変え、中身は em で相対指定する。 */
.pcard{
  font-size:7mm;                     /* A4に1枚のときの基準 */
  border:1px dashed #c8cdd6;         /* 切り取り線 */
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:1em 0.7em;gap:1.1em;overflow:hidden;color:#111;
}
#poster[data-layout="a6"]   .pcard{font-size:4.2mm;gap:0.6em;padding:0.8em 0.6em;}
#poster[data-layout="card"] .pcard{font-size:2.4mm;gap:0.4em;padding:0.7em 0.6em;}

.pcard__event{font-size:0.85em;font-weight:800;color:var(--navy);line-height:1.3;flex:none;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pcard__lead{font-size:1.05em;font-weight:900;color:var(--red);line-height:1.2;flex:none;}
.pcard__lead b{font-size:2.1em;display:inline-block;line-height:1.05;}
/* 名刺サイズは縦が足りないのでリード文を1行に詰める */
#poster[data-layout="card"] .pcard__lead{font-size:0.9em;}
#poster[data-layout="card"] .pcard__lead b{font-size:1.4em;margin-left:.3em;}
#poster[data-layout="card"] .pcard__lead br{display:none;}

/* キャラとQRを横並び。寸法はemで確定させる（％や100%だと親の高さが不定で潰れる） */
.pcard__body{display:flex;align-items:center;justify-content:center;gap:0.7em;flex:none;}
.pcard__char{width:6.5em;height:auto;object-fit:contain;}
.pcard__qr{width:12.6em;height:12.6em;object-fit:contain;image-rendering:pixelated;}
#poster[data-layout="a6"]   .pcard__char{width:5.6em;}
#poster[data-layout="a6"]   .pcard__qr{width:11.6em;height:11.6em;}
#poster[data-layout="card"] .pcard__char{width:6em;}
#poster[data-layout="card"] .pcard__qr{width:16em;height:16em;}   /* 名刺でも読める大きさを優先 */

.pcard__how{font-size:0.66em;font-weight:800;color:#111;line-height:1.3;flex:none;}
.pcard__meta{font-size:0.5em;font-weight:700;color:#3a4250;line-height:1.4;flex:none;}
.pcard__url{font-size:0.3em;color:#9aa1ad;word-break:break-all;line-height:1.25;flex:none;
  max-width:100%;font-weight:600;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.pcard__date{font-size:0.3em;color:#b3b9c4;font-weight:600;flex:none;}
#poster[data-layout="card"] .pcard__how{font-size:0.62em;}
#poster[data-layout="card"] .pcard__meta{font-size:0.48em;}
#poster[data-layout="card"] .pcard__url,
#poster[data-layout="card"] .pcard__date{display:none;}

/* ---- 印刷（ここから「PDFに保存」を選ぶ）---- */
@media print{
  @page{ size:A4 portrait; margin:8mm; }
  html,body{height:auto!important;overflow:visible!important;}
  body.admin{background:#fff!important;}
  body.admin>*{display:none!important;}
  body.admin>#poster-modal{
    display:block!important;position:static!important;inset:auto!important;
    background:#fff!important;padding:0!important;margin:0!important;
  }
  #poster-modal .no-print{display:none!important;}
  .poster-scroll{display:block!important;background:none!important;padding:0!important;
    overflow:visible!important;}
  #poster{
    width:194mm!important;height:281mm!important;
    transform:none!important;margin:0!important;   /* 画面用の縮小をリセット */
    box-shadow:none!important;break-inside:avoid;
  }
  .pcard{border-color:#dcdfe5;}
  /* 背景色・画像をプリンタに出させる（Safari/Chromeとも既定でOFFのことがある） */
  *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;}
}
.poster-warn{margin:0 12px 10px;background:#fdecea;border:1px solid #f3b5ae;border-radius:10px;
  padding:10px 12px;color:#a3261a;font-size:12.5px;font-weight:700;line-height:1.6;}
.poster-warn[hidden]{display:none;}