* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { height:100%; }
body {
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP",sans-serif;
  background:#14121a; color:#f2eef5; display:flex; justify-content:center;
}
.screen { display:none; width:100%; max-width:430px; min-height:100dvh; padding:28px 20px; flex-direction:column; }
.screen.active { display:flex; }
.screen.center { justify-content:center; align-items:center; gap:22px; text-align:center; }

/* ---- スプラッシュ(タイトル画像) ---- */
.splash-tap {
  position:relative; z-index:2; flex:1; min-height:0;
  border:none; background:transparent; padding:0; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.splash-img {
  width:100%; height:100%; object-fit:contain; object-position:center;
  animation:splashIn .6s ease-out;
}
@keyframes splashIn { from{opacity:0; transform:scale(1.03)} to{opacity:1; transform:scale(1)} }

/* ---- キャラクター選択(カルーセル) ---- */
.sel-header { position:relative; z-index:2; text-align:center; padding:calc(16px + env(safe-area-inset-top)) 16px 8px; }
.sel-title { font-size:15px; font-weight:700; color:#f2eef5; letter-spacing:1px; }
.sel-notice { font-size:10px; color:#b8aed0; margin-top:4px; }
.sel-main { position:relative; z-index:2; flex:1; min-height:0; display:flex; align-items:center; }
.sel-img { flex:1; min-width:0; height:100%; object-fit:contain; object-position:center; }
.sel-img.slide-l { animation:slideL .3s ease-out; }
.sel-img.slide-r { animation:slideR .3s ease-out; }
@keyframes slideL { from{opacity:0; transform:translateX(24px)} to{opacity:1; transform:translateX(0)} }
@keyframes slideR { from{opacity:0; transform:translateX(-24px)} to{opacity:1; transform:translateX(0)} }
.sel-arrow {
  position:relative; z-index:3; flex-shrink:0; width:42px; height:42px; margin:0 8px;
  border:none; border-radius:50%; background:rgba(12,9,18,0.55); color:#fff;
  font-size:14px; cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.sel-arrow:active { background:rgba(255,79,129,0.7); transform:scale(.95); }
.sel-info {
  position:relative; z-index:2; text-align:center;
  background:rgba(12,9,18,0.62);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  border-radius:16px 16px 0 0;
  padding:12px 18px calc(16px + env(safe-area-inset-bottom));
}
.sel-dots { display:flex; justify-content:center; gap:8px; margin-bottom:8px; }
.sel-dots span { width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,0.25); transition:.2s; }
.sel-dots span.on { background:#ff4f81; width:18px; border-radius:4px; }
.sel-name { font-size:20px; font-weight:800; color:#fff; }
.sel-sub { font-size:12px; color:#ff9ec4; margin-top:2px; }
.sel-profile { font-size:12px; color:#cfc6dd; line-height:1.7; margin:8px 0 12px; min-height:60px; }

/* ---- (旧リスト型・未使用) ---- */
.logo { text-align:center; font-size:42px; letter-spacing:2px; margin-top:32px;
  background:linear-gradient(90deg,#ff7eb3,#ff4f81); -webkit-background-clip:text; background-clip:text; color:transparent; }
.tagline { text-align:center; color:#b9b2c4; margin-top:8px; font-size:13px; }
.notice { text-align:center; color:#7e7690; font-size:11px; margin-top:12px; line-height:1.7; }
.select-label { text-align:center; margin:24px 0 14px; font-size:14px; color:#d9cfe6; font-weight:600; }
.char-list { display:flex; flex-direction:column; gap:12px; padding-bottom:24px; }
.char-card { display:flex; align-items:center; gap:14px; background:#1f1b29; border:1px solid #35304a;
  border-radius:14px; padding:10px 14px; cursor:pointer; color:inherit; text-align:left; transition:.15s; }
.char-card:active { border-color:#ff4f81; transform:scale(.98); }
.char-card img { width:64px; height:96px; object-fit:cover; object-position:top; border-radius:10px; background:#2a2438; }
.cc-name { font-size:17px; font-weight:700; }
.cc-sub { font-size:12px; color:#a79dbb; margin-top:4px; }

/* ---- キャリブレーション ---- */
.calib-track { width:80%; height:12px; background:#2a2438; border-radius:6px; overflow:hidden; }
#calib-bar { height:100%; width:0%; background:linear-gradient(90deg,#ff7eb3,#ff4f81); transition:width .1s; }
#calib-msg { line-height:1.7; padding:0 10px; }

/* ============================================================
   ステージ: フルブリードレイアウト
   1) 好感度ゲージ: 上部固定・半透明帯
   2) キャラ立ち絵: 画面全体(object-fit:cover / 上基準)
   3) リアクション吹き出し: 顔付近・判定時のみ
   4) テキストボックス: 下部・半透明(背景が透ける)
   5) 録音ボタン: ボックス内・最下部フル幅
   ============================================================ */
.screen.stage { position:relative; padding:0; overflow:hidden; }

img[src=""], img:not([src]) { visibility:hidden; }

/* 最背面: 同じ絵をぼかして全面に敷く(半透明パネル越しにも見える) */
.char-blur {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  filter:blur(24px) brightness(.55); transform:scale(1.1);
  z-index:0;
}
/* キャラ表示領域: ゲージ下端〜テキストボックス上端を正確に埋める(可変) */
.char-area { position:relative; flex:1; min-height:0; z-index:2; }
/* ▼チューニング: 顔が切れる場合は object-position を「top center」→「center 20%」等に */
.char-bg {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:top center;
  transition:filter .3s;
}
.char-bg.love { filter:brightness(1.1) saturate(1.15); }
.char-bg.angry { filter:brightness(.8) saturate(.75); }
.char-bg.despair { filter:grayscale(.85) brightness(.55); }

/* 1) 上部オーバーレイ(通常フロー) */
.top-overlay {
  position:relative; z-index:3;
  background:rgba(10,8,14,0.55);
  padding:calc(10px + env(safe-area-inset-top)) 14px 8px;
}
.gauge-row { display:flex; align-items:center; gap:10px; }
.gauge-heart { font-size:18px; color:#ff9ec4; }
.gauge-track { flex:1; height:16px; background:rgba(255,255,255,0.18); border-radius:8px; overflow:hidden; }
#gauge-fill { height:100%; width:30%; background:linear-gradient(90deg,#ff7eb3,#ff4f81); transition:width .5s; }
#gauge-fill.flash-up { animation:flashUp .5s; }
#gauge-fill.flash-down { background:#6b6577; animation:flashDown .5s; }
@keyframes flashUp { 0%{filter:brightness(2)} 100%{filter:brightness(1)} }
@keyframes flashDown { 0%,40%{filter:brightness(.4)} 100%{filter:brightness(1)} }
#gauge-num { min-width:32px; text-align:right; font-weight:700; font-size:14px; color:#fff; }
.turn-label { text-align:center; color:rgba(255,255,255,0.55); font-size:10px; letter-spacing:2px; margin-top:4px; }

.stage-name {
  position:absolute; z-index:3; top:10px; left:14px;
  background:rgba(10,8,14,0.5); color:#fff; font-size:12px; font-weight:700;
  padding:4px 12px; border-radius:12px;
}

/* 3) リアクション吹き出し(顔付近) */
/* 吹き出し: テキストボックス直上に固定(顔を隠さない)。デザインは下部パネルと統一
   ▼チューニング: bottom の px で高さを微調整 */
.bubble {
  position:absolute; z-index:3; bottom:14px; left:18px; right:18px;
  background:rgba(12,9,18,0.85); color:#f2eef5;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  border:1.5px solid rgba(255,255,255,0.3);
  border-radius:14px; padding:10px 14px; font-size:13px; line-height:1.6;
  opacity:0; transform:translateY(6px); transition:.25s; pointer-events:none;
}
.bubble.show { opacity:1; transform:translateY(0); }
.bubble.match { border-color:#ff7eb3; }
.bubble.dislike { border-color:#8fa0ff; }
.bubble.silence { border-color:#8f8698; }

/* 4) 下部テキストボックス(半透明・背景が透ける) */
.bottom-panel {
  position:relative; z-index:3;
  background:rgba(12,9,18,0.62);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  border-radius:16px 16px 0 0;
  padding:14px 16px calc(14px + env(safe-area-inset-bottom));
}
.char-line { font-size:13px; color:#e7ddf2; line-height:1.6; min-height:20px; }
.read-label { text-align:center; font-size:10px; color:rgba(255,255,255,0.45); letter-spacing:1px; margin-top:10px; }
.player-line { text-align:center; font-size:19px; font-weight:800; margin-top:6px; line-height:1.5; color:#fff; }
.hint { text-align:center; font-size:11px; color:#b8aed0; margin-top:6px; min-height:16px; }
.meter-track { height:6px; background:rgba(255,255,255,0.15); border-radius:3px; overflow:hidden; margin:12px 0 10px; }
#live-meter { height:100%; width:0%; background:#5DCAA5; transition:width .06s; }

/* 5) 録音ボタン */
.rec-btn { width:100%; padding:16px; font-size:16px; font-weight:800; border:none; border-radius:14px;
  background:linear-gradient(90deg,#ff7eb3,#ff4f81); color:#fff; cursor:pointer; user-select:none;
  -webkit-user-select:none; touch-action:none; }
.rec-btn.recording { background:linear-gradient(90deg,#ff4444,#c40f3f); animation:pulse 1s infinite; }
@keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.02)} }

.shake { animation:shake .35s; }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-7px)} 75%{transform:translateX(7px)} }

/* ---- 結果(フルブリード+下部パネル) ---- */
.result-panel {
  position:relative; z-index:3;
  background:rgba(12,9,18,0.72);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  border-radius:16px 16px 0 0; text-align:center;
  padding:22px 18px calc(22px + env(safe-area-inset-bottom));
}
#result-title { font-size:24px; }
.result-line { margin-top:10px; font-size:14px; color:#e7ddf2; line-height:1.7; }
.result-score { margin-top:8px; color:#a79dbb; font-size:13px; }
.btn-row { display:flex; gap:10px; margin-top:16px; }
.btn { flex:1; padding:14px; border:none; border-radius:12px; font-size:14px; font-weight:700; cursor:pointer;
  background:linear-gradient(90deg,#ff7eb3,#ff4f81); color:#fff; }
.btn.ghost { background:rgba(255,255,255,0.12); color:#d9cfe6; }

/* ---- デバッグ ---- */
#debug { position:fixed; left:0; right:0; bottom:0; background:rgba(0,0,0,.85); color:#7CFC9A;
  font:11px/1.6 monospace; padding:8px 12px; z-index:99; }