/* ======================================================================
   POI-NOTICE-KIT v1 — poinotice.css
   「ボタンを待たない自動お知らせ」= 数秒で勝手に消えるトースト。
   デザインは poierr v3（社長承認 2026-09-09）のトーン＆マナーをそのまま使う
   ＝同じ配色・角丸・白パネル・meta行。違いは「ボタンが無い」ことだけ。

   🛑 操作を一切要求しない。wrap は pointer-events:none 固定＝画面の
      どのボタン（STARTなど）も絶対に塞がない。ここを外すな。
   🛑 v1 のパスは固定。壊れる変更を入れるときは v2 を切ること。
   ====================================================================== */

#poinotice-wrap {
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 99990;              /* poierr(100000) より必ず下 */
  display: none;
  justify-content: center;
  pointer-events: none;        /* 🛑 STARTボタンを塞がないための生命線 */
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Segoe UI", Roboto, sans-serif;
  -webkit-user-select: none;
  user-select: none;
}

#poinotice-wrap.poinotice-visible {
  display: flex;
}

#poinotice-card {
  display: flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  width: min(92vw, 520px);
  padding: 12px 14px 12px 12px;
  background: #F3E1C9;
  border: 3px solid #FFFDF5;
  border-radius: 20px;
  box-shadow: 0 10px 26px rgba(60, 40, 20, 0.35);
  color: #4A3826;
  text-align: left;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.24s ease-out, transform 0.24s ease-out;
}

#poinotice-wrap.poinotice-in #poinotice-card {
  opacity: 1;
  transform: translateY(0);
}

#poinotice-illust {
  flex: 0 0 auto;
  width: 56px;
  height: 66px;
}

#poinotice-illust img {
  display: block;
  width: 56px;
  height: 66px;
}

#poinotice-body {
  flex: 1 1 auto;
  min-width: 0;
}

#poinotice-title {
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #7A4F22;
}

#poinotice-message {
  padding: 9px 10px;
  background: #FFFDF5;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.55;
  white-space: pre-line;
  word-break: break-word;
}

#poinotice-meta {
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.4;
  color: #6E5A40;
}

@media (max-width: 380px) {
  #poinotice-card { gap: 8px; padding: 10px 12px 10px 10px; }
  #poinotice-illust, #poinotice-illust img { width: 48px; height: 57px; }
  #poinotice-message { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  #poinotice-card { transition: opacity 0.24s ease-out; transform: none; }
  #poinotice-wrap.poinotice-in #poinotice-card { transform: none; }
}