/* ===== 背景（横幅100%・上辺基準） ===== */
html, body {
  margin: 0;
  background-image: url("images/monitor.jpg");
  background-color: #000000;
  background-repeat: no-repeat;
  background-position: top center;   /* 上揃え＋中央 */
  background-size: 100% auto;        /* 横100％・縦は比率維持（= 高さは 100vw×比） */
  height: 100%;
}

/* ===== 行ピッチ・余白・分割パラメータ ===== */
:root {
  --line-step: 1.1;

  /* モニター上フレーム回避の上マージン（必要に応じて微調整） */
  --profile-top: clamp(8vw, 10vw, 12vw);

  /* 左右フレーム余白（従来どおり） */
  --frame-x: clamp(8vw, 10vw, 12vw);

  /* ★背景画像の縦横比（高さ/幅）。例：16:9 → 1080/1920=0.5625 */
  --bg-ar: 0.5625;

  /* ★境界線の位置：画像トップからの％（例：60 = 上6割／下4割） */
  --split-from-top: 80;
}

/* ===== 文字（styles.css と同じ 1.5vw） ===== */
p {
  margin: 0;
  font-family: 'DotGothic16', sans-serif;
  font-size: 1.5vw;
  color: #CAFFBD;
  filter: blur(1px);
  position: static;
}


#animatedText, #oceanText { font-size: 1.5vw; }

.name-xxl {
  font-size: 2.5em;
  line-height: var(--line-step); /* ← line-heightは共通のまま */
}

a:link, a:visited { color:#21D28D; }
a { text-decoration:none; }

/* 1文字ずつフェードイン（script.jsがspanを差し込む） */
.smooth span:not(.blinking){
  opacity: 0;
  will-change: opacity, transform;
  animation: charIn 0.09s forwards;
}
@keyframes charIn{
  from{ opacity:0; filter:blur(2px); transform:translateY(0.2em) }
  to  { opacity:1; filter:blur(0);   transform:translateY(0) }
}

/* ===== “背景画像高さ”に同期した上下分割 =====
   ポイント：上段の高さ = (split% × 100vw × 画像縦横比) で決める */
html, body, .screen-frame { height: 100%; }

.profile-rows{
  display: grid;
  /* 上段：calc( split% × 1vw × bg-ar ) → 背景の高さに追随
     下段：残り（1fr） */
  grid-template-rows:
    minmax(0, calc(var(--split-from-top) * 1vw * var(--bg-ar)))
    1fr;
  height: 100svh;               /* ビューポート全体に表示 */
  padding: 0 var(--frame-x);
  box-sizing: border-box;
  gap: 0;
  min-width: 0;
  overflow: hidden;             /* 外側で突き抜け防止 */
}

/* ===== 上段（レイアウト＆余白） ===== */
.row-top{
  display: grid;
  grid-template-columns: auto 1fr; /* 左：画像優先 / 右：残り */
  column-gap: 1vw;
  align-items: start;
  min-width: 0;
  min-height: 0;
  padding-top: var(--profile-top);
  overflow: hidden;
}

/* ===== 下段（レイアウト＆スクロール） =====
   下段全体は “残り領域”。溢れたら内側スクロール。 */
.row-bottom{
  display: grid;
  grid-template-columns: 3fr 2fr;  /* 左：テキスト / 右：画像（比率指定） */
  column-gap: clamp(1vw, 2vw, 3vw);
  align-items: start;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  padding-bottom: clamp(6svh, 8svh, 10svh); /* 画面下フレーム回避 */
}

.row-bottom .col-left {
  padding-left: clamp(5vw, 7.5vw, 10vw);
}

/* “縮まない”対策：グリッド子に必ず min-width:0 */
.col-left, .col-right, .avatar-box, .traits-box { min-width: 0; }

.avatar-box, .traits-box{
  display:flex;
  overflow:hidden;
}
.avatar-box { align-items:flex-start; justify-content:flex-start; }

/* 下段右画像：テキスト側に寄せる */
.traits-box {
  display:flex;
  align-items:center;      /* 縦方向：中央揃え */
  justify-content:center;  /* 横方向：中央揃え */
  justify-self:center;     /* グリッド内でも中央揃え */
  width:100%;              /* カラム幅いっぱいに使う */
  padding-left:0;          /* 余白は不要 */
}

/* ===== 画像：背景と同じ“横幅連動”に揃える ===== */
#profile-photo{
  display:block;
  width: 15vw;
  height:auto;
  object-fit:contain;
  /* 上段のトラック内で自動リミット（高さは背景連動式に決まる） */
  max-height: 100%;
  filter: blur(0.75px); /* ← 追加 */
}
#traits-photo{
  display:block;
  width: 18vw;
  height:auto;
  object-fit:contain;
  max-height: 100%;
  margin:0; /* 余計なマージン排除 */
  filter: blur(0.5px); /* ← この1行を追加 */
}

/* ===== テキストコンテナ（行位置計算は従来維持） ===== */
#animatedText, #oceanText { position:relative; width:100%; }
#animatedText { min-height: calc(7  * var(--line-step) * 1em); }
#oceanText   { min-height: calc(11 * var(--line-step) * 1em); }
#animatedText p.smooth, #oceanText p.smooth{
  position:absolute;
  top: calc(var(--row) * var(--line-step) * 1em + var(--bump, 0px));
  left:0; right:0;
  margin:0;
  line-height: var(--line-step);
  white-space:pre-line;
}

/* 名前を含む行の次から“2行ぶん”押し下げ */
#animatedText p.smooth:has(.name-xxl) ~ p.smooth {
  --bump: calc(2 * var(--line-step) * 1em);
}

/* ※ 縦一列に崩さない方針なので、@media の1カラム化は行いません */