/* ===========================================================================
   character.css  -  分析画面のマスコット(js/character.js 用)
   既存の色・余白・文字サイズの変数(app.css)だけを使い、ライト/ダーク両対応です。
   =========================================================================== */
.mascot{
  display:flex; align-items:flex-start; gap:10px;
  margin-top:var(--sp-24); padding:var(--sp-8) 0 var(--sp-8);
  min-height:calc(112px + var(--sp-16));            /* 吹き出しの出入りで画面がずれない高さ */
}
.mascot[hidden]{ display:none; }

/* クリック範囲は画像の表示領域ぴったり */
.mascot-btn{
  flex:0 0 auto; display:block; padding:0; margin:0; border:0; background:none;
  line-height:0; cursor:pointer; border-radius:var(--radius-md);
  -webkit-tap-highlight-color:transparent; user-select:none; -webkit-user-select:none;
  touch-action:manipulation;
}
.mascot-btn img{
  display:block; height:112px; width:auto; max-width:none;
  -webkit-user-drag:none; pointer-events:none;
}
.mascot-btn:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; }
.mascot-btn:active img{ transform:scale(.97); transform-origin:50% 100%; }

/* 吹き出し(淡い色・コンパクト・長いセリフは折り返し) */
.mascot-bubble{
  display:none; position:relative; align-self:flex-start; margin-top:6px;
  max-width:min(300px, calc(100% - 91px));
  padding:9px 12px; border-radius:var(--radius-lg);
  background:var(--brand-soft); color:var(--ink); border:1px solid var(--line);
  font-size:var(--fs-sm); line-height:1.55; font-weight:600;
  overflow-wrap:anywhere; word-break:normal;
}
.mascot-bubble.is-on{ display:block; }
.mascot-bubble::before{                              /* 左(キャラ側)へのしっぽ */
  content:""; position:absolute; left:-6px; top:14px; width:10px; height:10px;
  background:var(--brand-soft); border-left:1px solid var(--line); border-top:1px solid var(--line);
  transform:rotate(-45deg);
}
.mascot-bubble.fade{ animation:mascotFade .22s ease-out; }
@keyframes mascotFade{ from{ opacity:0; transform:translateY(3px); } to{ opacity:1; transform:none; } }

/* ダークモードでは、黒い輪郭線が背景に溶けないよう、ごく薄い縁取りを付ける */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .mascot-btn img{ filter:drop-shadow(0 0 1.5px rgba(255,255,255,.55)); }
}
:root[data-theme="dark"] .mascot-btn img{ filter:drop-shadow(0 0 1.5px rgba(255,255,255,.55)); }

@media (prefers-reduced-motion: reduce){
  .mascot-bubble.fade{ animation:none; }
  .mascot-btn:active img{ transform:none; }
}

/* ===========================================================================
   v2.3  なかよし度カード / 出来事のリアクション / アニメーションOFF
   既存の色・余白・文字サイズの変数だけを使います。
   =========================================================================== */
.affinity-card{
  margin-top:var(--sp-24); padding:var(--sp-12) var(--sp-16);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
}
.affinity-card[hidden]{ display:none; }
.affinity-card:not([hidden]) + .mascot{ margin-top:var(--sp-8); }
.aff-head{ display:flex; align-items:baseline; gap:8px; }
.aff-label{ font-size:var(--fs-sm); font-weight:700; color:var(--ink-2); }
.aff-lv{ font-family:var(--font-rounded); font-size:var(--fs-lg); font-weight:800; color:var(--brand-strong); }
.aff-xp{ margin-left:auto; font-size:var(--fs-xs); color:var(--ink-3); }
.aff-track{ height:8px; margin-top:var(--sp-8); border-radius:99px; background:var(--line-strong); overflow:hidden; }
.aff-fill{ height:100%; border-radius:99px; background:var(--brand); transition:width .6s cubic-bezier(.2,.8,.2,1); }
.aff-foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:6px; flex-wrap:wrap; }
.aff-sub{ font-size:var(--fs-xs); color:var(--ink-2); font-weight:600; }
.aff-special{
  border:1px solid var(--line-strong); background:var(--brand-soft); color:var(--brand-strong);
  font-size:var(--fs-xs); font-weight:700; border-radius:99px; padding:0 12px; min-height:var(--tap-min);
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.aff-special[hidden]{ display:none; }
.aff-special:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
.aff-hint{ margin:2px 0 0; font-size:var(--fs-xs); color:var(--ink-3); line-height:1.6; }

/* 出来事のリアクション: 画面下(トーストの上)に一時的に浮かぶ。タップは下の画面へ素通しする */
.char-react{
  position:fixed; left:50%; bottom:calc(150px + env(safe-area-inset-bottom));
  transform:translate(-50%,8px); width:min(360px, calc(100vw - 32px));
  display:flex; align-items:center; gap:10px; padding:6px 14px 6px 6px;
  background:var(--brand-soft); color:var(--ink); border:1px solid var(--line-strong);
  border-radius:var(--radius-lg); box-shadow:0 10px 24px -12px var(--shadow);
  font-size:var(--fs-sm); font-weight:600; line-height:1.5;
  opacity:0; pointer-events:none; z-index:45;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.char-react[hidden]{ display:none; }
.char-react.in{ opacity:1; transform:translate(-50%,0); }
.char-react[data-anim="on"]{ transition:opacity .24s ease-out, transform .28s cubic-bezier(.2,.8,.2,1); }
.char-react-face{
  flex:0 0 auto; width:44px; height:44px; border-radius:50%; overflow:hidden;
  background:var(--surface); border:1px solid var(--line);
}
.char-react-face img{ display:block; width:60px; height:auto; max-width:none; margin:-2px 0 0 -8px; pointer-events:none; }
.char-react-body{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.char-react-chip{
  align-self:flex-start; padding:1px 8px; border-radius:99px; background:var(--brand); color:var(--brand-on);
  font-size:var(--fs-xs); font-weight:800; letter-spacing:.02em;
}
.char-react-chip[hidden]{ display:none; }
.char-react-text{ overflow-wrap:anywhere; }

/* キャラクターのアニメーション設定がOFFのとき(設定 > アニメーション) */
.mascot[data-anim="off"] .mascot-bubble.fade{ animation:none; }
.mascot[data-anim="off"] .mascot-btn:active img{ transform:none; }
.affinity-card[data-anim="off"] .aff-fill{ transition:none; }

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .char-react-face img{ filter:drop-shadow(0 0 1.5px rgba(255,255,255,.55)); }
}
:root[data-theme="dark"] .char-react-face img{ filter:drop-shadow(0 0 1.5px rgba(255,255,255,.55)); }

@media (prefers-reduced-motion: reduce){
  .char-react[data-anim="on"]{ transition:none; }
  .aff-fill{ transition:none; }
}

/* ===========================================================================
   v2.3  SNSシェア画像(分析画面のボタンとプレビュー)
   =========================================================================== */
.share-row{ display:flex; justify-content:flex-end; margin-top:2px; }
.share-open{ min-height:var(--tap-min); padding:0 var(--sp-8); font-size:var(--fs-sm); }
.share-preview{ display:flex; justify-content:center; margin-bottom:var(--sp-8); }
.share-preview img{
  display:block; width:auto; height:auto; max-width:100%; max-height:46vh; aspect-ratio:1080/1350;
  border-radius:var(--radius-md); border:1px solid var(--line); background:var(--brand-soft); object-fit:contain;
}
.share-note{ margin:0 0 var(--sp-8); font-size:var(--fs-xs); color:var(--ink-3); line-height:1.7; }
.share-status{ min-height:1.2em; margin:0 0 var(--sp-8); font-size:var(--fs-xs); color:var(--ink-2); font-weight:600; }