/* =========================================================
   pict-actions.css — ピクト・イベント用スタイル
   既存サイトの配色（--gold / --cream / --border 等）に合わせています。
   変数が未定義の環境向けにフォールバック値も入れています。
========================================================= */

/* ---- クリック可能ピクト ---- */
.pict-actionable { cursor: pointer; }
.pict-actionable[role="button"]:focus-visible {
  outline: 2px solid var(--gold, #8c6a3f);
  outline-offset: 4px;
  border-radius: 6px;
}

/* ---- 表示 / 非表示（タイマー用）----
   ※ rotate などの装飾 transform を壊さないよう、
     opacity と visibility だけで切り替えています。 */
.pict-actionable {
  transition: opacity .55s ease, visibility .55s ease;
}
.pict-actionable.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.pict-actionable.is-visible {
  opacity: 1;
  visibility: visible;
}

/* ---- ① 吹き出し ---- */
.pict-bubble {
  position: absolute;
  left: 50%;
  bottom: 100%;
  margin-bottom: 12px;
  transform: translate(-50%, 6px);
  background: #fff;
  color: #1a1410;
  border: 1px solid var(--border, #ddd5c8);
  border-radius: 14px;
  padding: 10px 16px;
  font-family: 'Noto Serif JP', serif;
  font-size: 13px;
  line-height: 1.7;
  white-space: nowrap;
  box-shadow: 0 8px 22px rgba(139, 106, 63, .18);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
  z-index: 60;
}
.pict-bubble.is-on { opacity: 1; transform: translate(-50%, 0); }
.pict-bubble::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: #fff;
}

/* ---- ② 猫じゃらしカーソル時の演出 ---- */
#cat-stalker.is-cattoy { transform: scale(1.15); }

/* ---- モーダル（contact-modal と同じトーン）---- */
.pict-modal { position: fixed; inset: 0; z-index: 9999; display: none; }
.pict-modal.is-open { display: block; }
.pict-modal-overlay {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .6);
  backdrop-filter: blur(4px);
}
.pict-modal-box {
  position: relative;
  width: min(520px, calc(100% - 40px));
  margin: 8vh auto;
  background: #fbf8f2;
  border: 1px solid var(--border, #ddd5c8);
  border-radius: 18px;
  padding: 44px 36px 36px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .25);
  animation: pictModalIn .35s ease;
}
@keyframes pictModalIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
.pict-modal-close {
  position: absolute; top: 16px; right: 20px;
  border: none; background: transparent;
  font-size: 28px; line-height: 1; cursor: pointer; color: #888;
}
.pict-modal-label {
  text-align: center;
  color: var(--gold, #8c6a3f);
  letter-spacing: .4em;
  font-size: 12px;
  font-family: 'Cormorant Garamond', serif;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.pict-modal-box h2 {
  text-align: center;
  font-family: 'Zen Antique Soft', serif;
  font-weight: 400;
  font-size: 22px;
  letter-spacing: .06em;
  margin-bottom: 18px;
}
.pict-q-text {
  text-align: left;
  font-family: 'Noto Serif JP', serif;
  font-size: 15px; line-height: 1.9;
  margin-bottom: 22px;
}

/* 選択肢ボタン */
.pict-choices { display: flex; flex-direction: column; gap: 12px; }
.pict-choice {
  width: 100%;
  padding: 14px 18px;
  background: #fff;
  border: 1px solid var(--border, #ddd5c8);
  border-radius: 10px;
  font-family: 'Noto Serif JP', serif;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: border-color .25s, background .25s, transform .25s;
}
.pict-choice:hover:not(:disabled) {
  border-color: var(--gold, #8c6a3f);
  background: #fff8ee;
  transform: translateY(-2px);
}
.pict-choice:disabled { opacity: .6; cursor: default; }

/* フィードバック・結果 */
.pict-feedback { margin-top: 20px; text-align: center; }
.pict-feedback .is-correct { color: #3f6f4a; font-weight: 700; }
.pict-feedback .is-wrong   { color: #b4503f; font-weight: 700; }
.pict-explain {
  font-size: 13px; line-height: 1.8;
  color: var(--gray-text, #6b6055);
  margin-top: 8px;
}
.pict-result-score,
.pict-fortune-text {
  text-align: center;
  font-family: 'Noto Serif JP', serif;
  font-size: 15px; line-height: 1.9;
  margin-bottom: 4px;
}
.pict-diag-img {
  display: block;
  width: 160px; height: auto;
  margin: 0 auto 18px;
  border-radius: 10px;
}

/* 次へ / とじる ボタン */
.pict-next {
  display: block;
  margin: 24px auto 0;
  padding: 12px 30px;
  background: var(--gold, #8c6a3f);
  color: #fff;
  border: none; border-radius: 9px;
  font-family: 'Noto Serif JP', serif;
  font-size: 14px; letter-spacing: .08em;
  cursor: pointer;
  transition: background .25s, transform .25s;
}
.pict-next:hover { background: #5f3f23; transform: translateY(-2px); }

/* モーション軽減設定への配慮 */
@media (prefers-reduced-motion: reduce) {
  .pict-actionable, .pict-bubble, .pict-choice, .pict-next { transition: none; }
  .pict-modal-box { animation: none; }
}

/* スマホ：モーダルの余白を詰めて上に寄せる＋はみ出し対策 */
@media (max-width: 600px) {
  .pict-modal-box {
    margin: 2vh auto;          /* 8vh → 4vh：上の余白を削って上詰め */
    padding: 28px 20px 22px;   /* 44/36/36 → 圧縮 */
    max-height: 92vh;          /* それでも長い時は中でスクロール可（ボタンに必ず届く） */
    overflow-y: auto;
  }
  .pict-modal-box h2 { margin-bottom: 12px; font-size: 20px; }
  .pict-q-text   { margin-bottom: 14px; }   /* ← 設問の下のアキ（"真ん中の空き"の主因） */
  .pict-choices  { gap: 10px; }             /* 選択肢どうしの間隔 */
  .pict-choice   { padding: 12px 16px; }    /* ボタンの高さを少し低く */
  .pict-feedback { margin-top: 14px; }      /* フィードバックの上のアキ */
}
.pict-modal-box h2.is-pass { color: #3f6f4a; }
.pict-modal-box h2.is-fail { color: #b4503f; }
/* =========================================================
   ⑥ 本音診断（honne）— 入力フォーム & 結果
========================================================= */

/* 入力フォーム */
.pict-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 4px;
  text-align: left;
}
.pict-form .pict-field { display: block; }
.pict-form .pict-field-label {
  display: block;
  margin-bottom: 6px;
  font-family: 'Noto Serif JP', serif;
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--gray-text, #6b6055);
}
.pict-form input,
.pict-form select {
  width: 100%;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--border, #ddd5c8);
  border-radius: 10px;
  font-family: 'Noto Serif JP', serif;
  font-size: 14px;
  color: #1a1410;
  box-sizing: border-box;
}
.pict-form input:focus,
.pict-form select:focus {
  outline: none;
  border-color: var(--gold, #8c6a3f);
  background: #fff8ee;
}

/* 結果 */
.pict-honne-type {
  text-align: center;
  font-family: 'Zen Antique Soft', serif;
  font-size: 24px;
  letter-spacing: .06em;
  color: var(--gold, #8c6a3f);
  margin: 2px 0 16px;
}
.pict-honne-voice {
  text-align: center;
  font-family: 'Noto Serif JP', serif;
  font-size: 15px;
  line-height: 1.9;
  color: #1a1410;
  background: #fff8ee;
  border: 1px solid var(--border, #ddd5c8);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 0 0 16px;
}
.pict-honne-profile {
  text-align: center;
  font-family: 'Noto Serif JP', serif;
  font-size: 12px;
  color: var(--gray-text, #6b6055);
  margin-top: 16px;
}

.pict-honne-text { text-align: left; }
.pict-honne-voice { text-align: left; }

/* =========================================================
   ⑦ 留守番シミュレーター（rusuban）
========================================================= */

/* --- 入力画面 --- */
.rusuban-emoji {
  font-size: 2.4rem;
  text-align: center;
  margin-bottom: 4px;
}
.rusuban-input .pict-form { margin-top: 18px; }

/* --- 選択肢画面 --- */
.rusuban-choice-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rusuban-choice-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--border, #ddd5c8);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  font-family: 'Noto Serif JP', serif;
  transition: border-color .25s, background .25s, transform .2s;
}
.rusuban-choice-card:hover {
  border-color: var(--gold, #8c6a3f);
  background: #fff8ee;
  transform: translateY(-2px);
}
.rusuban-choice-icon {
  font-size: 1.8rem;
  flex-shrink: 0;
  line-height: 1;
}
.rusuban-choice-body {
  display: flex;
  flex-direction: column;
}
.rusuban-choice-label {
  font-weight: 700;
  font-size: 14px;
  color: #1a1410;
}
.rusuban-choice-desc {
  font-size: 12px;
  color: var(--gray-text, #6b6055);
  margin-top: 2px;
}

/* --- カメラ画面 --- */
.rusuban-camera {
  background: #1a1416;
  border-radius: 14px;
  padding: 20px 18px 24px;
  color: #e8e0e0;
  position: relative;
  overflow: hidden;
}
/* スキャンライン風のオーバーレイ */
.rusuban-camera::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(255,255,255,0.015) 2px,
    rgba(255,255,255,0.015) 4px
  );
  pointer-events: none;
}
.rusuban-cam-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}
.rusuban-cam-live {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  font-family: 'Cormorant Garamond', serif;
}
.rusuban-cam-dot {
  width: 8px;
  height: 8px;
  background: #ff4444;
  border-radius: 50%;
  animation: rusuban-blink 1.2s ease infinite;
}
@keyframes rusuban-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}
.rusuban-cam-label {
  font-size: 11px;
  color: #8a7a7a;
  font-family: 'Noto Serif JP', serif;
}
.rusuban-cam-feed {
  min-height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  z-index: 1;
}
.rusuban-cam-event {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .4s ease, transform .4s ease;
  margin-bottom: 12px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.06);
  border-radius: 8px;
  border-left: 3px solid var(--gold, #8c6a3f);
}
.rusuban-cam-event.is-show {
  opacity: 1;
  transform: translateY(0);
}
.rusuban-cam-time {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--gold, #c9a96e);
  font-family: 'Cormorant Garamond', serif;
  letter-spacing: .04em;
}
.rusuban-cam-text {
  display: block;
  font-size: 13px;
  line-height: 1.6;
  margin-top: 3px;
  font-family: 'Noto Serif JP', serif;
}
.rusuban-cam-gen {
  text-align: center;
  padding: 16px 0 4px;
  font-size: 13px;
  color: #8a7a7a;
  font-family: 'Noto Serif JP', serif;
  opacity: 0;
  transition: opacity .4s ease;
  position: relative;
  z-index: 1;
}
.rusuban-cam-gen.is-show { opacity: 1; }
.rusuban-dots::after {
  content: '';
  animation: rusuban-dots 1.5s steps(4, end) infinite;
}
@keyframes rusuban-dots {
  0%  { content: ''; }
  25% { content: '.'; }
  50% { content: '..'; }
  75% { content: '...'; }
}

/* カメラ画面時はモーダル背景を暗くする */
.pict-modal-box:has(.rusuban-camera) {
  background: #1a1416;
  border-color: #2a2224;
}
.pict-modal-box:has(.rusuban-camera) .pict-modal-close {
  color: #8a7a7a;
}

/* --- 報告書画面 --- */
.rusuban-report { text-align: center; }
.rusuban-report-stamp {
  display: inline-block;
  border: 2px solid var(--gold, #8c6a3f);
  border-radius: 8px;
  padding: 4px 14px;
  font-family: 'Zen Antique Soft', serif;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--gold, #8c6a3f);
  margin-bottom: 14px;
  transform: rotate(-2deg);
}
.rusuban-report-date {
  font-size: 12px;
  color: var(--gray-text, #6b6055);
  margin-bottom: 20px;
  font-family: 'Noto Serif JP', serif;
}

/* タイムライン */
.rusuban-timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}
.rusuban-tl-item {
  padding: 10px 0 10px 18px;
  border-left: 2px solid var(--border, #ddd5c8);
  position: relative;
  margin-left: 4px;
}
.rusuban-tl-item::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 14px;
  width: 10px;
  height: 10px;
  background: var(--gold, #8c6a3f);
  border-radius: 50%;
  border: 2px solid #fbf8f2;
}
.rusuban-tl-item:last-child { border-left-color: transparent; }
.rusuban-tl-time {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--gold, #8c6a3f);
  font-family: 'Cormorant Garamond', serif;
  letter-spacing: .04em;
}
.rusuban-tl-text {
  display: block;
  font-size: 14px;
  line-height: 1.7;
  margin-top: 2px;
  font-family: 'Noto Serif JP', serif;
}
.rusuban-tl-item.is-highlight .rusuban-tl-text { font-weight: 700; }

/* 選択肢の伏線回収ノート */
.rusuban-report-note {
  margin-top: 16px;
  padding: 12px 16px;
  background: #fff8ee;
  border: 1px solid var(--border, #ddd5c8);
  border-radius: 10px;
  font-family: 'Noto Serif JP', serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--gold, #8c6a3f);
  text-align: center;
}

/* ボタン行 */
.rusuban-btn-row {
  display: flex;
  gap: 10px;
  margin-top: 22px;
}
.rusuban-btn-ghost {
  flex: 1;
  background: transparent;
  border: 1px solid var(--border, #ddd5c8);
  color: var(--gray-text, #6b6055);
  margin: 0;
}
.rusuban-btn-ghost:hover {
  border-color: var(--gold, #8c6a3f);
  color: var(--gold, #8c6a3f);
  background: transparent;
}
.rusuban-btn-share {
  flex: 2;
  margin: 0;
}

/* スマホ調整 */
@media (max-width: 600px) {
  .rusuban-camera { padding: 16px 14px 20px; }
  .rusuban-cam-feed { min-height: 150px; }
  .rusuban-cam-event { padding: 8px 12px; margin-bottom: 10px; }
  .rusuban-cam-text { font-size: 12px; }
  .rusuban-choice-card { padding: 14px 12px; gap: 12px; }
  .rusuban-tl-text { font-size: 13px; }
  .rusuban-btn-row { flex-direction: column; }
  .rusuban-btn-ghost,
  .rusuban-btn-share { flex: auto; width: 100%; }
}


@media (max-width: 600px) {
  .about-pict-mouse {
    display: none;
  }
}

/* =========================================================
   ⑧ 鼻紋登録装置（bimon）— 壊れるアニメーション
========================================================= */
.is-bimon-broken {
  animation: bimon-shake 0.5s ease;
}
@keyframes bimon-shake {
  0%, 100% { transform: translateX(0); }
  20%  { transform: translateX(-4px) rotate(-1deg); }
  40%  { transform: translateX(4px) rotate(1deg); }
  60%  { transform: translateX(-3px) rotate(-0.5deg); }
  80%  { transform: translateX(2px) rotate(0.5deg); }
}

/* =========================================================
   ⑨ 段ボール転送装置（tensou）— 暗転＋ログ演出
========================================================= */

/* 暗転オーバーレイ */
.tensou-blackout {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #000;
  opacity: 0;
  animation: tensou-fadein 0.6s ease forwards;
  cursor: pointer;
}
.tensou-blackout.is-fadeout {
  animation: tensou-fadeout 0.8s ease forwards;
}
@keyframes tensou-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes tensou-fadeout {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* ログコンテナ */
.tensou-log {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(400px, calc(100% - 48px));
  text-align: left;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.tensou-log.is-show { opacity: 1; }

/* 各行（ターミナル風） */
.tensou-line {
  font-family: 'Courier New', 'Menlo', monospace;
  font-size: 14px;
  line-height: 2.2;
  color: #00ff88;
  text-shadow: 0 0 8px rgba(0, 255, 136, 0.5),
               0 0 20px rgba(0, 255, 136, 0.15);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.tensou-line.is-show {
  opacity: 1;
  transform: translateY(0);
}

/* 最後のメッセージ（ゴールド） */
.tensou-message {
  font-family: 'Noto Serif JP', serif;
  font-size: 15px;
  line-height: 1.8;
  color: var(--gold, #c9a96e);
  text-shadow: 0 0 12px rgba(201, 169, 110, 0.4),
               0 0 30px rgba(201, 169, 110, 0.1);
  margin-top: 28px;
  text-align: center;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.tensou-message.is-show {
  opacity: 1;
  transform: translateY(0);
}

/* 転送ログ：色バリエーション（pict-init.phpの class で指定） */
.tensou-alert {
  color: #ff4444;
  text-shadow: 0 0 8px rgba(255, 68, 68, 0.5),
               0 0 20px rgba(255, 68, 68, 0.15);
}
.tensou-warning {
  color: #ffcc00;
  text-shadow: 0 0 8px rgba(255, 204, 0, 0.5),
               0 0 20px rgba(255, 204, 0, 0.15);
}
.tensou-dim {
  color: #557766;
  text-shadow: 0 0 6px rgba(85, 119, 102, 0.3);
}

/* スマホ調整 */
@media (max-width: 600px) {
  .tensou-line { font-size: 12px; line-height: 2; }
  .tensou-message { font-size: 13px; }
}

/* モーション軽減 */
@media (prefers-reduced-motion: reduce) {
  .is-bimon-broken { animation: none; }
  .tensou-blackout { animation: none; opacity: 1; }
  .tensou-blackout.is-fadeout { animation: none; opacity: 0; }
  .tensou-line, .tensou-message { transition: none; }
}

/* =========================================================
   ⑩ 意識調査（chosa）— リッカート尺度 & レベル表示
========================================================= */
.chosa-subtitle {
  text-align: center;
  font-size: 14px;
  color: var(--gold, #8c6a3f);
  letter-spacing: .1em;
  margin: -8px 0 16px;
  font-family: 'Noto Serif JP', serif;
}

.chosa-question {
  font-family: 'Noto Serif JP', serif;
  font-size: 16px;
  line-height: 1.8;
  margin: 20px 0 24px;
  padding: 16px 20px;
  background: rgba(140, 106, 63, .06);
  border-left: 3px solid var(--gold, #8c6a3f);
  border-radius: 0 8px 8px 0;
}

.chosa-scale {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chosa-scale-btn {
  display: block;
  width: 100%;
  padding: 12px 16px;
  font-family: 'Noto Serif JP', serif;
  font-size: 14px;
  text-align: left;
  background: transparent;
  border: 1px solid var(--border, #ddd5c8);
  border-radius: 8px;
  color: inherit;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.chosa-scale-btn:hover {
  background: rgba(140, 106, 63, .08);
  border-color: var(--gold, #8c6a3f);
}

/* 結果：レベル表示 */
.chosa-level-display {
  margin: 24px 0 20px;
  text-align: center;
}

.chosa-level-number {
  font-family: 'Zen Antique Soft', serif;
  font-size: 18px;
  color: var(--gold, #8c6a3f);
  margin-bottom: 12px;
}
.chosa-level-number span {
  font-size: 48px;
  line-height: 1;
  display: inline-block;
  margin-left: 4px;
}

.chosa-level-bar {
  width: 100%;
  height: 8px;
  background: var(--border, #ddd5c8);
  border-radius: 4px;
  overflow: hidden;
}
.chosa-level-fill {
  height: 100%;
  background: var(--gold, #8c6a3f);
  border-radius: 4px;
  transition: width .8s ease;
}

.chosa-level-title {
  text-align: center;
  font-family: 'Zen Antique Soft', serif;
  font-size: 20px;
  font-weight: 400;
  margin: 16px 0 8px;
  color: var(--gold, #8c6a3f);
}

/* スマホ調整 */
@media (max-width: 600px) {
  .chosa-question { font-size: 14px; padding: 12px 16px; margin: 16px 0 18px; }
  .chosa-scale-btn { padding: 10px 14px; font-size: 13px; }
  .chosa-level-number span { font-size: 40px; }
}

/* モーション軽減 */
@media (prefers-reduced-motion: reduce) {
  .chosa-level-fill { transition: none; }
  .chosa-scale-btn { transition: none; }
}