/* 自己紹介のプロフィール: 左に身分証、右にくわしい項目 */
.profile-card { display: grid; grid-template-columns: 1fr; gap: 0; }
.idcard { display: flex; flex-direction: column; align-items: center; text-align: center; padding-bottom: 16px; margin-bottom: 4px; border-bottom: 2px dashed var(--ink); }
.id-name { display: block; font: 400 2rem/1.2 var(--dot); letter-spacing: .12em; margin-top: 4px; }
.idcard small { display: block; color: var(--sub); font-size: .82rem; line-height: 1.6; }
.id-chips { margin-top: 8px; }

/* 顔: 押すと表情が変わる */
.id-face { position: relative; padding: 0; margin: 4px 0 0; border: 0; background: none; cursor: pointer; }
.id-face .avatar { width: 132px; height: 132px; display: block; transition: transform .15s steps(2); }
.id-face:hover .avatar { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.id-face:active .avatar { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.id-face:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
.id-face.glitch .avatar { animation: id-glitch .32s steps(4) both; }
@keyframes id-glitch {
  0% { transform: translate(3px, -1px); filter: hue-rotate(40deg) contrast(1.4); clip-path: inset(0 0 55% 0); }
  35% { transform: translate(-3px, 1px); clip-path: inset(40% 0 0 0); }
  70% { transform: translate(1px, 0); filter: none; clip-path: inset(0 0 0 0); }
  100% { transform: none; }
}
/* 顔のまわりのドット（ふだんはゆっくり、押すとぴかぴか） */
.id-dots i { position: absolute; width: 8px; height: 8px; background: var(--sky); border: 2px solid var(--ink); animation: id-dot 2.4s steps(2) infinite; }
.id-dots i:nth-child(1) { right: -14px; top: 6px; }
.id-dots i:nth-child(2) { right: -24px; top: 26px; width: 6px; height: 6px; animation-delay: .6s; }
.id-dots i:nth-child(3) { left: -16px; bottom: 18px; animation-delay: 1.2s; }
.id-dots i:nth-child(4) { right: -8px; top: -12px; width: 6px; height: 6px; animation-delay: 1.8s; }
.id-face.glitch .id-dots i { animation-duration: .25s; }
@keyframes id-dot { 50% { opacity: 0; } }

/* ふきだし */
.id-bubble { position: relative; margin: 14px 0 2px; padding: 4px 12px; min-height: 1.7em; font: .86rem/1.7 var(--dot); background: var(--card); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.id-bubble::before { content: ""; position: absolute; left: 50%; top: -8px; width: 10px; height: 10px; margin-left: -5px; background: var(--card); border-left: 2px solid var(--ink); border-top: 2px solid var(--ink); transform: rotate(45deg); }
.id-bubble.pop { animation: id-pop .24s steps(3) both; }
@keyframes id-pop { from { transform: scale(.7); opacity: 0; } }

/* 性格: まだ書きかけのしるし */
.chip-wip i { display: inline-block; width: .5em; height: 1em; margin-left: 3px; vertical-align: -2px; background: var(--ink); animation: id-caret 1s steps(1) infinite; }
@keyframes id-caret { 50% { opacity: 0; } }

/* 404番のバーコード（ときどき読みとりの光が通る） */
.id-code { position: relative; margin-top: 12px; display: flex; flex-direction: column; align-items: center; gap: 2px; overflow: hidden; padding: 4px 8px 2px; }
.id-bars { display: flex; align-items: stretch; height: 30px; gap: 0; }
.id-bars i { display: block; background: var(--ink); }
.id-code code { font: .64rem ui-monospace, Consolas, monospace; letter-spacing: .18em; color: var(--sub); }
.id-code::after { content: ""; position: absolute; top: 0; bottom: 0; left: -20%; width: 14%; background: linear-gradient(90deg, transparent, rgba(143, 214, 248, .85), transparent); animation: id-scan 5s steps(20) infinite; }
@keyframes id-scan { 0%, 70% { left: -20%; } 100% { left: 110%; } }

/* 項目: さわった行に印がつく */
dl.profile dt { transition: transform .12s steps(2), box-shadow .12s steps(2); }
dl.profile dd { transition: background .15s; }
dl.profile dt:hover, dl.profile dt:has(+ dd:hover) { transform: translate(-2px, -2px); box-shadow: 3px 3px 0 var(--ink); background: var(--sky); }
dl.profile dd:hover { background: linear-gradient(90deg, rgba(143, 214, 248, .22), transparent 80%); }

@media (min-width: 860px) {
  .profile-card { grid-template-columns: 240px minmax(0, 1fr); column-gap: 30px; align-items: stretch; }
  .idcard { justify-content: center; padding: 6px 26px 6px 0; margin: 0; border-bottom: 0; border-right: 2px dashed var(--ink); }
  .profile-card dl.profile { align-self: center; }
}

html.fx-off .id-dots i, html.fx-off .id-code::after, html.fx-off .chip-wip i { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .id-dots i, .id-code::after, .chip-wip i, .id-face.glitch .avatar, .id-bubble.pop { animation: none; }
}