/* 状態の印は nav-modal / nav-dim など nav- 付き（style.css の .modal{display:none} とぶつかって問いが消えたため）
   ナビ（聖女セレナ）: 吹き出し・光らせる穴・指（js/nav.js）。#phone の内側だけに描く（320 幅でも横にはみ出さない） */
.nav { position: absolute; inset: 0; z-index: 60; pointer-events: none; }
.nav[hidden] { display: none; }
.nav .nav-box, .nav .nav-box * { pointer-events: auto; }

/* 暗幕: 対象のまわりを覆う4枚の板（js/nav.js の dimAround）。大きな box-shadow は広がり 400px 超だと描かれず暗くならなかったので使わない */
.nav-shade { position: absolute; display: none; background: rgba(6, 10, 24, .6); transition: left .18s, top .18s, width .18s, height .18s; }
.nav.nav-modal .nav-shade { background: rgba(6, 10, 24, .62); }

/* 光らせる物: 光る枠が脈打ち、外へ波が広がる（暗幕の穴は、枠の内側＝対象そのもの） */
.nav-hole { position: absolute; border-radius: 12px; display: none; transition: left .18s, top .18s, width .18s, height .18s;
  box-shadow: 0 0 0 3px #fff6c8, 0 0 18px 6px #ffd76acc; animation: nav-glow 1.2s ease-in-out infinite; }
@keyframes nav-glow { 50% { box-shadow: 0 0 0 4px #fff, 0 0 26px 10px #ffd76a; } }
.nav-hole::after { content: ''; position: absolute; inset: -3px; border-radius: 14px; border: 3px solid #ffe46a; animation: nav-pulse 1.2s ease-out infinite; }
@keyframes nav-pulse { from { box-shadow: 0 0 0 0 #ffe46acc; opacity: 1; } to { box-shadow: 0 0 0 16px #ffe46a00; opacity: 0; } }

/* 矢印: 対象のすぐ外から対象を指して跳ねる。下向きが基本・対象が上にあるときは .up（上向き） */
.nav-arrow { position: absolute; left: 0; top: 0; width: 36px; height: 40px; display: none; will-change: transform; }
.nav-arrow svg { display: block; width: 36px; height: 40px; fill: #ffd76a; stroke: #1b1b1b; stroke-width: 3; filter: drop-shadow(0 2px 4px #000a); animation: nav-bounce .7s ease-in-out infinite; }
.nav-arrow.up svg { transform: rotate(180deg); animation-name: nav-bounce-up; }
@keyframes nav-bounce { 50% { transform: translateY(8px); } }
@keyframes nav-bounce-up { from { transform: rotate(180deg) translateY(0); } 50% { transform: rotate(180deg) translateY(8px); } to { transform: rotate(180deg) translateY(0); } }
.nav-ring2 { position: absolute; display: none; border-radius: 10px; border: 3px dashed #fff6c8; background: #ffe46a33;
  box-shadow: 0 0 14px 4px #ffd76a99; animation: nav-ring 1s ease-in-out infinite; }
@keyframes nav-ring { 50% { background: #ffe46a66; } }

/* 指: 白い丸＋波紋（戦闘のはじめての指と同じ形） */
.nav-finger { position: absolute; left: 0; top: 0; width: 0; height: 0; display: none; will-change: transform; }
.nav-finger i, .nav-finger::after { position: absolute; left: -12px; top: -12px; width: 24px; height: 24px; border-radius: 50%; content: ''; }
.nav-finger i { background: #fff; border: 3px solid #1b1b1b; box-shadow: 0 2px 6px #0008; }
.nav-finger::after { border: 3px solid #fffb; animation: nav-ripple 1.1s ease-out infinite; }
@keyframes nav-ripple { from { transform: scale(.8); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }

/* 吹き出し: 顔絵＋名前＋文章。ふだんは下、光らせる物が下半分なら上 */
.nav-box { position: absolute; left: 8px; right: 8px; bottom: 10px; display: flex; gap: 8px; align-items: flex-start;
  background: linear-gradient(#fffaf0, #f3e6c8); color: #2a1a08; border: 3px solid #a07a2c; border-radius: 14px;
  padding: 8px 10px 8px 8px; box-shadow: 0 6px 18px #000a; font-size: 15px; line-height: 1.5; max-height: 46%; }
.nav-box.top { bottom: auto; top: 54px; }
.nav-box.nudge { animation: nav-nudge .35s; }
@keyframes nav-nudge { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.nav-face { flex: 0 0 auto; width: 64px; height: 76px; border-radius: 10px; border: 2px solid #c9a24a;
  background: #fff center -4px / 230% auto no-repeat; box-shadow: inset 0 0 0 2px #fff; }
.nav-talk { flex: 1 1 auto; min-width: 0; }
.nav-name { display: block; font-size: 12px; color: #8a5a10; letter-spacing: .05em; }
.nav-text { margin: 2px 0 0; font-weight: bold; word-break: normal; overflow-wrap: anywhere; }
.nav-acts { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.nav-acts:empty { display: none; }
.nav-acts .btn { font-size: 15px; padding: 7px 12px; flex: 1 1 auto; }
.nav-skip { position: absolute; right: 6px; top: -30px; font-family: inherit; font-size: 13px; color: #fff; background: #0009;
  border: 1px solid #fff8; border-radius: 14px; padding: 3px 12px; }
.nav-box.top .nav-skip { top: auto; bottom: -30px; }
.nav-skip[hidden] { display: none; }

/* あとから来る1回きりの案内: 吹き出しは知らせの窓（js/notice.js の #notice）に入れ、ナビの層は光と指だけ */
.nav.nav-glow .nav-box { display: none; }
.notice.nav-notice { padding: 8px 8px 0; }
.nav-note { display: flex; gap: 8px; align-items: flex-start; width: 100%; max-width: 520px; box-sizing: border-box;
  background: linear-gradient(#fffaf0, #f3e6c8); color: #2a1a08; border: 3px solid #a07a2c; border-radius: 14px;
  padding: 8px 10px 8px 8px; box-shadow: 0 6px 18px #000a; font-size: 15px; line-height: 1.5; }
.nav-note .nav-face { width: 56px; height: 66px; }
.nav-note .nav-acts .btn { flex: 0 1 auto; }

/* 最初の1回の問い（中央） */
.nav.nav-modal .nav-box { top: 50%; bottom: auto; transform: translateY(-50%); flex-wrap: wrap; padding: 12px; }
.nav.nav-modal .nav-face { width: 84px; height: 100px; }
.nav.nav-modal .nav-acts .btn { font-size: 16px; padding: 10px 8px; }
.nav.nav-small .nav-box { padding: 5px 8px; font-size: 14px; line-height: 1.35; align-items: center; }
.nav.nav-small .nav-box.top { top: 46px; }
.nav.nav-small .nav-face { width: 40px; height: 46px; background-position: center -2px; }
.nav.nav-small .nav-name { display: none; }
.nav.nav-small .nav-skip { font-size: 12px; padding: 2px 10px; }

@media (max-width: 340px) {
  .nav-box { font-size: 14px; gap: 6px; padding: 6px 8px 6px 6px; }
  .nav-face { width: 52px; height: 64px; }
}