/* ===== 着信画面：画面中央のスマホ =====
   中の大きさはすべて em。--ph-h（本体の高さ）を変えると全体が比例して伸び縮みする */
#call { --ph-h: min(80vh, 660px); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 4;
  width: calc(var(--ph-h) * .48); height: var(--ph-h); font-size: calc(var(--ph-h) / 42); padding: 0; border: none; background: none; box-shadow: none;
  font-family: -apple-system, "Hiragino Sans", "Zen Kaku Gothic New", "Yu Gothic", sans-serif; text-align: center; color: #fff;
  animation: phIn .35s ease-out; }
#call[hidden] { display: none; }
@keyframes phIn { from { opacity: 0; transform: translate(-50%, -46%); } }

/* 本体：黒いフチ、側面のボタン、角の丸み */
.ph-frame { position: absolute; inset: 0; border-radius: 3.1em; padding: .55em; background: #0c0d10;
  box-shadow: 0 0 0 .14em #3a3d44, 0 0 0 .3em #15161a, 0 2.4em 5em rgba(0, 0, 0, .75), 0 0 6em rgba(120, 140, 200, .12); }
.ph-frame::before, .ph-frame::after { content: ""; position: absolute; width: .26em; border-radius: .2em; background: #2a2c32; }
.ph-frame::before { left: -.42em; top: 7.5em; height: 2.6em; box-shadow: 0 3.6em 0 #2a2c32; }
.ph-frame::after { right: -.42em; top: 10em; height: 4.4em; }
.ph-screen { position: relative; height: 100%; border-radius: 2.6em; overflow: hidden; display: flex; flex-direction: column; align-items: center;
  background: radial-gradient(120% 70% at 50% 0%, #3a4256 0%, #1c2130 45%, #0a0c12 100%); }
/* 画面のくすみ（暗い部屋で光る液晶） */
.ph-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(160deg, rgba(255, 255, 255, .08), transparent 35%), repeating-linear-gradient(0deg, rgba(0, 0, 0, .06) 0 1px, transparent 1px 3px); }

/* ステータスバー */
.ph-status { position: relative; width: 100%; height: 3em; display: flex; align-items: center; justify-content: space-between; padding: .5em 1.7em 0 2.1em; font-size: .9em; font-weight: 600; letter-spacing: .02em; }
.ph-clock { font-variant-numeric: tabular-nums; }
.ph-island { position: absolute; left: 50%; top: .7em; transform: translateX(-50%); width: 6.2em; height: 1.8em; border-radius: 1em; background: #000; }
.ph-icons { display: flex; align-items: center; gap: .32em; }
.ph-icons svg { height: .8em; width: auto; fill: #fff; }
.ph-batt { position: relative; width: 1.75em; height: .85em; border: .09em solid rgba(255, 255, 255, .55); border-radius: .25em; padding: .08em; }
.ph-batt::after { content: ""; position: absolute; right: -.25em; top: .22em; width: .12em; height: .32em; border-radius: 0 .1em .1em 0; background: rgba(255, 255, 255, .55); }
.ph-batt i { display: block; height: 100%; width: 18%; border-radius: .12em; background: #ff453a; }

/* 発信者 */
.ph-caller { margin-top: 2.4em; }
.ph-state { font-size: .95em; color: rgba(255, 255, 255, .7); letter-spacing: .08em; min-height: 1.4em; }
#call .call-num { font-size: 2.6em; font-weight: 400; letter-spacing: .04em; margin: .12em 0 .1em; color: #fff; font-family: inherit; }
.ph-sub { font-size: .95em; color: rgba(255, 255, 255, .62); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.ph-avatar { margin-top: 2.2em; width: 6.4em; height: 6.4em; border-radius: 50%; background: linear-gradient(#8e93a0, #5d626e); display: grid; place-items: end center; overflow: hidden; opacity: .9; }
.ph-avatar svg { width: 82%; fill: #d9dce3; }

/* 鳴っているとき */
.ph-ring { margin-top: auto; width: 100%; padding: 0 2.1em 2.2em; }
.ph-mini { display: flex; justify-content: space-between; padding: 0 .6em; margin-bottom: 2em; }
.ph-mini span { display: flex; flex-direction: column; align-items: center; gap: .4em; font-size: .78em; color: rgba(255, 255, 255, .85); }
.ph-mini b { width: 2.4em; height: 2.4em; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .16); }
.ph-mini svg { width: 1.3em; height: 1.3em; color: #fff; }
.ph-big { display: flex; justify-content: space-between; }
.ph-btn { display: flex; flex-direction: column; align-items: center; gap: .55em; background: none; border: none; color: #fff; font: inherit; font-size: .9em; padding: 0; cursor: pointer; }
.ph-btn b { width: 4.6em; height: 4.6em; border-radius: 50%; display: grid; place-items: center; }
.ph-btn svg { width: 2em; height: 2em; fill: #fff; }
.ph-btn.decline b, .ph-btn.end b { background: #ff3b30; }
.ph-btn.decline svg, .ph-btn.end svg { transform: translateY(.1em); }
.ph-btn.accept b { background: #34c759; animation: phPulse 1.4s ease-out infinite; }
.ph-btn:active b { filter: brightness(.8); }
@keyframes phPulse { 0% { box-shadow: 0 0 0 0 rgba(52, 199, 89, .55); } 80%, 100% { box-shadow: 0 0 0 1.2em rgba(52, 199, 89, 0); } }

/* 通話中 */
.ph-talk { display: none; margin-top: auto; width: 100%; padding: 0 2em 2em; flex-direction: column; align-items: center; }
.ph-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3em .6em; width: 100%; margin-bottom: 2.2em; }
.ph-grid span { display: flex; flex-direction: column; align-items: center; gap: .45em; font-size: .78em; color: #fff; }
.ph-grid b { width: 3.9em; height: 3.9em; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .17); }
.ph-grid svg { width: 1.7em; height: 1.7em; color: #fff; }
#call.talk .ph-ring { display: none; }
#call.talk .ph-talk { display: flex; }
#call.talk .ph-avatar { margin-top: 1.6em; width: 5em; height: 5em; }

/* 通話終了の一瞬 */
#call.ended .ph-ring, #call.ended .ph-talk { opacity: .35; transition: opacity .3s; }
#call.ended .ph-state { color: #ff6961; }
#call.ended .ph-sub { visibility: hidden; }

.ph-home { position: absolute; bottom: .55em; left: 50%; transform: translateX(-50%); width: 7.4em; height: .3em; border-radius: .2em; background: rgba(255, 255, 255, .85); }

/* 呼び出し中は小さく震える */
#call:not(.talk):not(.ended) .ph-frame { animation: phBuzz 2.2s infinite; }
@keyframes phBuzz { 0%, 30%, 100% { transform: none; } 3%, 9%, 15%, 21% { transform: translateX(-.08em) rotate(-.4deg); } 6%, 12%, 18%, 24% { transform: translateX(.08em) rotate(.4deg); } }

/* 着信中は、まわりを少し暗く */
#stage:has(#call:not([hidden])) #bg { filter: brightness(.6); transition: filter .4s; }

/* スマホ縦：書き起こし欄（下）を避けて、上の空いた所の中央に */
@media (max-width: 760px) {
  #call { --ph-h: min(50vh, 470px, 100vw); top: max(52px, 6vh); transform: translateX(-50%); }
  @keyframes phIn { from { opacity: 0; transform: translate(-50%, 4%); } }
}
/* 横向きスマホ：左の書き起こし欄を避けて右側の中央に */
@media (max-height: 500px) {
  #call { --ph-h: 76vh; left: 76%; top: 46%; }
}