/* 七階の外廊下 */
#game-root{--g3d-title:'Shippori Mincho B1','Zen Kaku Gothic New',serif}
.ap-records{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 16px;font-size:13.5px;opacity:.92}
.ap-records b{font-size:17px;color:var(--accent);margin:0 2px}
.ap-note-btn{min-height:38px;padding:6px 16px;font-size:13px}
.ap-note{list-style:none;padding:0;margin:10px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:6px}
.ap-note li{padding:7px 10px;border-radius:8px;background:rgba(255,255,255,.05);font-size:13px;opacity:.5}
.ap-note li.is-found{opacity:1;background:rgba(233,165,75,.14);border:1px solid rgba(233,165,75,.4)}

/* 伝票（右上） */
.ap-slip{position:relative;width:244px;max-width:46vw;margin-top:6px;padding:9px 12px 8px;background:#f4f0e4;color:#1d1d1f;border-radius:6px;box-shadow:0 6px 22px rgba(0,0,0,.45);font-size:12.5px;line-height:1.45;pointer-events:auto;cursor:pointer;transform:rotate(.6deg);transition:box-shadow .3s}
.ap-slip::before{content:'';position:absolute;inset:0;border-radius:6px;background:repeating-linear-gradient(0deg,rgba(0,0,0,.025) 0 1px,transparent 1px 3px);pointer-events:none}
.ap-slip__head{display:flex;justify-content:space-between;gap:8px;font-weight:900;font-size:11px;color:#fff;background:#2a4a7a;margin:-9px -12px 7px;padding:5px 12px;border-radius:6px 6px 0 0}
.ap-slip__head em{font-style:normal;opacity:.85}
.ap-slip__to{display:flex;align-items:baseline;gap:8px}
.ap-slip__to b{font-size:26px;font-weight:900;letter-spacing:.02em}
.ap-slip__to span{font-size:16px;font-weight:800;font-family:'Shippori Mincho B1',serif}
.ap-slip__body{display:none;margin-top:4px;border-top:1px dashed #b9b2a2;padding-top:5px}
.ap-slip.is-open .ap-slip__body{display:block}
.ap-slip__memo{margin:5px 0 0;padding:6px 8px;background:#fffdf3;border-left:3px solid #e9a54b;font-family:'Klee One','Zen Kaku Gothic New',sans-serif;font-weight:600;font-size:13px}
.ap-slip__hint{margin-top:4px;font-size:10.5px;opacity:.55;text-align:right}
.ap-slip__stamp{position:absolute;right:10px;top:34px;padding:2px 10px;border:3px solid currentColor;border-radius:6px;font-weight:900;font-size:17px;transform:rotate(-12deg);animation:ap-stamp .35s cubic-bezier(.2,1.6,.4,1) both;background:rgba(255,255,255,.4)}
.ap-slip__stamp--ok{color:#1f7a4a}
.ap-slip__stamp--stop{color:#b3261e}
.ap-slip__stamp--bad{color:#555;font-size:22px}
.ap-slip.is-flash{box-shadow:0 0 0 3px rgba(179,38,30,.8),0 6px 22px rgba(0,0,0,.45)}
@keyframes ap-stamp{from{transform:rotate(-12deg) scale(2.2);opacity:0}to{transform:rotate(-12deg) scale(1);opacity:1}}

/* 心得カード（開始時） */
.ap-rules{position:absolute;left:50%;top:18%;transform:translateX(-50%);width:min(440px,88vw);padding:14px 18px 12px;background:rgba(18,20,26,.86);border:1px solid rgba(233,165,75,.45);border-radius:12px;color:#f1ece2;font-size:14px;line-height:1.6;box-shadow:0 10px 30px rgba(0,0,0,.5);backdrop-filter:blur(4px);animation:ap-in .5s ease both}
.ap-rules h3{margin:0 0 6px;font-size:14px;color:var(--accent);letter-spacing:.06em}
.ap-rules ol{margin:0;padding-left:1.4em}
.ap-rules p{margin:6px 0 0;font-size:12.5px;opacity:.8}
@keyframes ap-in{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}

@media (max-width:640px), (max-height:460px){
  .ap-slip{width:190px;font-size:11.5px;padding:7px 10px 6px}
  .ap-slip__head{margin:-7px -10px 5px;padding:4px 10px}
  .ap-slip__to b{font-size:21px}
  .ap-slip__to span{font-size:14px}
  .ap-slip__memo{font-size:12px}
  .ap-rules{top:auto;bottom:34%;font-size:13px;padding:10px 14px}
}
@media (max-width:640px){
  #game-root .g3d-hud__tl{max-width:calc(100% - 205px)}
}
@media (max-height:460px){
  .ap-rules{bottom:auto;top:148px;left:auto;right:12px;transform:none;animation:none;width:min(360px,44vw);font-size:11px;padding:8px 12px}
  .ap-rules ol{padding-left:1.2em}
}

/* ---- 2026-10-06 チェックでの手直し ---- */
/* スマホ縦: 字幕が左下のスティックに重なっていた → 字幕をスティックの上へ。最初に出る「配達の心得」も、字幕と重ならないように少し上へ */
@media (pointer:coarse) and (orientation:portrait){
  .ap-rules{bottom:44%}
  #game-root .g3d-subtitle{bottom:calc(260px + env(safe-area-inset-bottom));max-width:92vw}
}
/* スマホ: 右上の伝票（「タップでメモを見る」）が、視点を動かす領域（操作の層が表示の層より上）の下になってタップできなかった
   → 表示の層を操作の層より上へ（表示の層は押せない作りで、押せるのは伝票だけ。/patrol/ と同じやり方） */
@media (pointer:coarse){ #game-root .g3d-hud{z-index:13} }