/* Profile（Administrator配下）：NES.css の正規コンポーネントで組む

   参考: https://nostalgic-css.github.io/NES.css/

   独自配色をやめ、既に読み込んでいる nes/nes.min.css の部品を使う。
   - カード     : .nes-container.is-dark.is-rounded.with-title
   - 顔画像     : .nes-avatar.is-large
   - 職業       : .nes-text.is-warning
   - 紹介文     : .nes-balloon.is-dark（メッセージウィンドウ）
   - 見出しリンク: .nes-btn.is-primary

   本ファイルは style2.css より後に読み込むこと。
   ここでは NES.css の見た目を壊さない範囲で、style2.css の旧装飾を打ち消し、
   サイドバー内に収まるようサイズだけを調整する。

   注意: .nes-container.is-dark は枠の描画に ::after を使うため、
   このファイルで .profile-card::after を定義してはいけない */

/* 日本語のドットフォント（JF Dot Shinonome Gothic 14）の定義とライセンスは
   css/fonts.css にまとめてある。文字サイズは14pxに揃えること */

/* style2.css の旧装飾（白背景・ぼかし影・斜めの帯）を打ち消す。

   幅について: パネル(.sidebar_2ndnav)は left:3.4em ずれて配置されるのに
   幅はサイドバーと同じため、右端の 3.4em 分はサイドバーの overflow-x:hidden で
   切り取られる。90% だとカード右端がその外に出て枠が消えるため、
   切り取られない幅に抑えている（カレンダーが 87% なのも同じ理由） */
.profile-card {
  /* 内訳: パネルの左ずれ 3.4em ＋ nes-container の margin 4px ＋ 余裕2px。
     切り取り位置ギリギリまで広げ、点線の枠が最後まで見えるようにしている。

     左ずれを固定値ではなく 3.4em で書いている理由:
     パネルの left も 3.4em で指定されており、この em はサイドバーの文字サイズに
     連動して変わる。1051px以上では 65px、1050px以下では 103.36px になる。
     固定値の 71px にすると1050px以下でずれ量に追従できず、
     カード右端が36pxはみ出して枠が切れる */
  width: calc(100% - 3.4em - 6px);
  max-width: 100%;
  background: none;
  box-shadow: none;
  overflow: visible;
}

.profile-card:before {
  display: none;
}

.profile-card__inner {
  position: relative;
  text-align: center;
}

/* 顔画像。nes-avatar は最大64pxのため、サイドバー内で見やすいサイズへ広げる。
   拡大してもドットの粒が残るようにする */
.profile-thumb {
  width: auto;
  height: auto;
  border: none;
  border-radius: 0;
  background: none;
  overflow: visible;
  margin: 0 auto 4px;
  /* 下の ::before / ::after（心電図の波形）を、この枠を基準に配置するため */
  position: relative;
}

/* 顔画像の背面を流れる心電図の波形。

   波形は外部ファイルではなくSVGのデータURIで持たせている。
   1ファイル分の読み込みを増やさずに済み、
   線の色や太さ・振幅をこのCSS内だけで調整できるため。

   波形の内訳（viewBox 240×100 の中に心拍1回分を描いている。基準線は y=60）:
     L58〜L66   P波（心房の収縮）の小さな盛り上がり
     L80〜L96   QRS波（心室の収縮）の鋭い上下
     L120〜L148 T波（心室の回復）のなだらかな盛り上がり

   鼓動の強弱は「速度」ではなく「振幅」で表している。
   横へ流れる速度は常に一定（1拍4秒）で、途中で変わらない。

   振幅を変える方法として拡大縮小（scaleY）は使っていない。
   背景ごと縦に引き伸ばすことになり、基準線の太さまで一緒に太ってしまうため。
   代わりに振幅だけが異なる波形を5枚用意し、
   拍の切れ目で background-image を差し替えている。
   この方法なら線の太さは常に3のまま変わらない。

   振幅の推移（1周20秒 ＝ 5拍。基準線 y=60 からのQRS波の振れ幅）:
     0〜4秒   小   上へ16 / 下へ8
     4〜8秒   特大 上へ52 / 下へ36   ← ここでいきなり大きくなる
     8〜12秒  大   上へ38 / 下へ26
     12〜16秒 中   上へ26 / 下へ16
     16〜20秒 小   上へ16 / 下へ8    ← 元の大きさへ戻る

   差し替えは1拍4秒の区切りと一致させている。
   横へ流れる動きも4秒で1枚分ずれるため、
   切り替わる瞬間は波形の継ぎ目と重なり、途中で分断されない。

   速度を変える場合、振幅の1周は必ず流れる速度の整数倍にすること。
   ずれると波形の途中で差し替わり、線が分断されて見える */
.profile-thumb::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 100px;
  transform: translateY(-50%);
  background-repeat: repeat-x;
  background-size: 240px 100px;
  background-position: 0 center;
  /* 動きを止める設定の環境ではこの波形（振幅小）が表示される */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='100' viewBox='0 0 240 100'%3E%3Cpath d='M0 60 H50 L58 60 L62 56 L66 60 H78 L82 64 L88 44 L94 68 L98 60 H114 L122 60 L130 55 L142 55 L150 60 H240' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  opacity: 0.9;
  /* 顔画像より背面へ置く。画像側は z-index: 1 を与えている */
  z-index: 0;
  /* 顔画像のリンクやクリックを妨げないようにする */
  pointer-events: none;
  animation:
    profile-heartbeat-scroll 4s linear infinite,
    profile-heartbeat-amplitude 20s step-end infinite;
}

/* 横へ流れる動き。背景1枚分ずらしきると次の1枚が同じ位置に来るため継ぎ目が出ない */
@keyframes profile-heartbeat-scroll {
  from {
    background-position: 0 center;
  }
  to {
    background-position: 240px center;
  }
}

/* 振幅の差し替え。
   background-image は中間の値を作れない性質のため、
   step-end を指定して各区切りで確実に切り替わるようにしている。
   これを linear や ease にすると切り替わる位置が区切りからずれる。

   区切りの位置: 20%=4秒 / 40%=8秒 / 60%=12秒 / 80%=16秒 */
@keyframes profile-heartbeat-amplitude {
  /* 小（安静） */
  0% {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='100' viewBox='0 0 240 100'%3E%3Cpath d='M0 60 H50 L58 60 L62 56 L66 60 H78 L82 64 L88 44 L94 68 L98 60 H114 L122 60 L130 55 L142 55 L150 60 H240' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
  /* 特大（いきなり大きくなる） */
  20% {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='100' viewBox='0 0 240 100'%3E%3Cpath d='M0 60 H50 L58 60 L62 49 L66 60 H78 L82 72 L88 8 L94 96 L98 60 H114 L122 60 L130 44 L142 44 L150 60 H240' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
  /* 大（ここから徐々に小さくなる） */
  40% {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='100' viewBox='0 0 240 100'%3E%3Cpath d='M0 60 H50 L58 60 L62 52 L66 60 H78 L82 69 L88 22 L94 86 L98 60 H114 L122 60 L130 48 L142 48 L150 60 H240' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
  /* 中 */
  60% {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='100' viewBox='0 0 240 100'%3E%3Cpath d='M0 60 H50 L58 60 L62 54 L66 60 H78 L82 66 L88 34 L94 76 L98 60 H114 L122 60 L130 52 L142 52 L150 60 H240' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
  /* 小（元の大きさへ戻る） */
  80%, 100% {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='100' viewBox='0 0 240 100'%3E%3Cpath d='M0 60 H50 L58 60 L62 56 L66 60 H78 L82 64 L88 44 L94 68 L98 60 H114 L122 60 L130 55 L142 55 L150 60 H240' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}

/* 動きを抑える設定をしている環境では波形を止める。
   止めても振幅小の波形が表示されるため、装飾は失われない */
@media (prefers-reduced-motion: reduce) {
  .profile-thumb::before {
    animation: none;
  }
}

/* style2.css で display:block のため、text-align では中央に寄らない。
   左右マージンを auto にして中央へ寄せる（これがないと右側に大きな空白ができる） */
.profile-thumb img.nes-avatar {
  width: 160px;
  height: 160px;
  margin-left: auto;
  margin-right: auto;
  image-rendering: pixelated;
  /* 心電図の波形（.profile-thumb::before）より前面へ置く。
     position を指定しないと z-index が効かない */
  position: relative;
  z-index: 1;
}

.profile-content {
  padding: 8px 0 0;
  text-align: center;
}

/* 名前: 半角英字のみのため Press Start 2P がそのまま使える */
/* 名前とエンカウント文を1行に並べる。
   style2.css の `.profile-content span { display:block }` を打ち消すため、
   各要素を inline に戻し、行としての余白はこの入れ物で持たせる */
.profile-encounter {
  margin-bottom: 16px;
}

.sidebar_nav .sidebar_2ndnav .profile-name {
  display: inline;
  font-family: "Press Start 2P", cursive;
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

/* RPGのエンカウント演出。名前に続けて読ませるため、名前との間隔を詰めている */
.sidebar_nav .sidebar_2ndnav .profile-appear {
  display: inline;
  font-family: "JF Dot Shinonome Gothic 14", sans-serif;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.6;
  color: #f7d51d;
  margin: 0;
  /* 末尾の▼が次の行に落ちないよう、この部分は折り返さない */
  white-space: nowrap;
}

/* 入力待ちカーソル。style2.css の `.profile-content span { display:block }` に
   負けないよう、クラス2つのセレクタで詳細度を上げている */
.profile-appear .profile-cursor {
  display: inline-block;
  margin-left: 0.4em;
  color: #fff;
  animation: profile-cursor-blink 1.8s infinite;
}

/* 表示と非表示をはっきり切り替える（ドット絵に合うよう中間の階調は挟まない）。
   明滅を半々にすると点滅が忙しく目障りになるため、
   表示7割・非表示3割にして落ち着いた明滅にしている */
@keyframes profile-cursor-blink {
  0%, 69% { opacity: 1; }
  70%, 100% { opacity: 0; }
}

/* 動きを抑える設定をしている環境では点滅させない */
@media (prefers-reduced-motion: reduce) {
  .profile-appear .profile-cursor {
    animation: none;
  }
}

/* 職業: RPGのステータス画面の項目に見立てた枠。
   左に職業、右にSNSアイコンを並べるため横並びにしている */
.profile-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
  border-top: 3px solid rgba(255, 255, 255, 0.35);
  border-bottom: 3px solid rgba(255, 255, 255, 0.35);
  padding: 10px 2px;
  margin-bottom: 16px;
}

/* SNSアイコン（NES.css の nes-icon）。
   style2.css の `.profile-content span { display: block }` を打ち消すため
   inline-flex に戻している。
   職業名が長くなってもアイコンが潰れないよう flex-shrink を切っている */
.sidebar_nav .sidebar_2ndnav .profile-sns {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  margin: 0;
}

/* style2.css のメニュー項目用の装飾を打ち消す。
   打ち消す対象は次の3つで、いずれもメニュー項目のための指定である。
     - `.sidebar_nav ul li a` の padding（1.05em 1em）と display:block
     - `.sidebar_nav ul li a:hover` の水色の背景
     - `.sidebar_nav ul li > ul li a` の font-size（0.6em） */
.sidebar_nav .sidebar_2ndnav .profile-sns .profile-sns__link {
  display: inline-flex;
  align-items: center;
  padding: 0;
  font-size: inherit;
  background: none;
  transition: none;
}

.sidebar_nav .sidebar_2ndnav .profile-sns .profile-sns__link:hover {
  background: none;
}

/* nes-icon は ::before で描くため、入れ物の余白を消しておく */
.sidebar_nav .sidebar_2ndnav .profile-sns .nes-icon {
  margin: 0;
}

/* 押せることが分かるよう、ホバー時だけ少し浮かせる。

   浮かせる対象は必ず内側のアイコンにすること。
   リンク(a)自体を動かすと、カーソルの判定領域ごと上へ逃げるため、
   「外れる → 元に戻る → また重なる」を高速で繰り返して
   カーソルの絵柄が激しく切り替わる不具合になる。
   アイコンを動かす分には transform がレイアウトに影響しないため、
   リンクの判定領域は元の位置に留まり、判定が安定する */
.sidebar_nav .sidebar_2ndnav .profile-sns .profile-sns__link .nes-icon {
  transition: transform 0.15s ease;
}

.sidebar_nav .sidebar_2ndnav .profile-sns .profile-sns__link:hover .nes-icon {
  transform: translateY(-2px);
}

/* アカウント未取得で href を付けていないアイコンは、押せる見た目にしない。
   カーソルの形と、重ねたときに持ち上がる動きの両方を止める。
   href を足せば自動的に押せる見た目へ戻る */
.sidebar_nav .sidebar_2ndnav .profile-sns .profile-sns__link:not([href]) {
  cursor: default;
}

.sidebar_nav .sidebar_2ndnav .profile-sns .profile-sns__link:not([href]):hover .nes-icon {
  transform: none;
}

.sidebar_nav .sidebar_2ndnav .profile-job {
  font-family: "JF Dot Shinonome Gothic 14", sans-serif;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.6;
  color: #fff;
  margin: 0;
}

/* 紹介文の吹き出し。既定は inline-block ＋ 余白が大きいため、
   パネル幅に合わせて調整する（尻尾は付けず、メッセージウィンドウとして使う） */
.profile-content .nes-balloon {
  display: block;
  margin: 0;
  padding: 12px 14px;
  text-align: left;
}

.sidebar_nav .sidebar_2ndnav .profile-intro {
  font-family: "JF Dot Shinonome Gothic 14", sans-serif;
  font-size: 14px;
  line-height: 1.9;
  text-align: left;
}

/* 見出しリンク「Profile」の見た目は css/link-menu.css 側で
   他パネルの見出し（Event Calendar / Comment＆Gallery / Bookmark）と
   まとめて指定しているため、ここでは扱わない */