/* ==========================================================================
   05b STAFF MY PAGE
   モックアップは実際のAOSダッシュボードの配色・構成に合わせている。
   （--aos-cyan #6fd6ff / --aos-emerald #5ef0b0 / --aos-gold #ffcf6e）
   ========================================================================== */

.aa-mypage{
	--aos-cyan:#6fd6ff;
	--aos-emerald:#5ef0b0;
	--aos-gold:#ffcf6e;
	overflow:hidden;
}

.aa-mypage__inner{
	display:grid;
	gap:clamp(32px,5vw,80px);
	align-items:center;
	grid-template-columns:repeat(auto-fit, minmax(min(100%,340px), 1fr));
}
.aa-mypage__body{ display:grid; gap:clamp(18px,3svh,32px); justify-items:start }
.aa-mypage .aa-section-head{ margin-bottom:0 }
.aa-mypage__text{ display:grid; gap:1.1em; color:var(--fg-sub); max-width:46ch }

/* 機能の要点 */
.aa-mypage__features{
	display:grid;
	gap:1px;
	width:100%;
	background:var(--rule);
	border-block:1px solid var(--rule);
}
.aa-mypage__feature{
	display:grid;
	gap:.3em;
	padding:clamp(12px,1.6vw,18px) 0;
	background:var(--bg);
}
.aa-mypage__feature-label{
	font-family:var(--font-mono);
	font-size:.6rem;
	letter-spacing:.2em;
	color:var(--c-signal);
}
.aa-mypage__feature-text{ font-size:.9rem; color:var(--fg-sub); line-height:1.8 }

/* ==========================================================================
   端末モックアップ
   ========================================================================== */

.aa-mypage__device{
	justify-self:center;
	width:min(100%,352px);
	padding:clamp(8px,1.2vw,12px);
	border-radius:clamp(22px,2.6vw,36px);
	background:linear-gradient(160deg, rgb(255 255 255 / .16), rgb(255 255 255 / .04));
	border:1px solid rgb(255 255 255 / .16);
	box-shadow:
		0 50px 90px -46px rgb(0 0 0 / .7),
		0 0 70px rgb(111 214 255 / .16);
}
.aa-mypage__screen{
	position:relative;
	padding:clamp(16px,2vw,20px);
	border-radius:clamp(16px,2vw,26px);
	overflow:hidden;
	/* cosmic テーマ・夜の背景 */
	background:linear-gradient(180deg,#101a3c,#0a1230 62%,#060a1e);
}
/* 地球の大気リム（実画面の下部の光） */
.aa-mypage__screen::after{
	content:"";
	position:absolute;
	inset:auto -20% -22% -20%;
	height:38%;
	border-radius:50% 50% 0 0;
	background:radial-gradient(60% 100% at 50% 100%, rgb(111 180 255 / .38), transparent 70%);
	pointer-events:none;
}

.aa-mypage__brand{ display:flex; align-items:baseline; gap:8px; margin-bottom:14px }
.aa-mypage__brand-name{
	font-family:var(--font-display);
	font-weight:600;
	font-size:1.05rem;
	letter-spacing:.2em;
	color:#eaf2ff;
	text-shadow:0 0 16px rgb(125 160 255 / .55);
}
.aa-mypage__brand-sub{
	font-family:var(--font-mono);
	font-size:.5rem;
	letter-spacing:.34em;
	color:#86a0d6;
}

/* 実画面と同じ「すりガラスのカード」 */
.aa-mypage__card{
	position:relative;
	border-radius:14px;
	padding:.85rem .95rem;
	margin-bottom:10px;
	backdrop-filter:blur(14px) saturate(140%);
	-webkit-backdrop-filter:blur(14px) saturate(140%);
	border:1px solid rgb(255 255 255 / .14);
	box-shadow:0 8px 30px rgb(0 0 0 / .35), inset 0 1px 0 rgb(255 255 255 / .08);
}

/* --- AI COMPANION --- */
.aa-mypage__card--ai{
	background:linear-gradient(135deg, rgb(111 214 255 / .1), rgb(185 168 255 / .08));
	border-color:rgb(111 214 255 / .3);
}
.aa-mypage__ai-label{
	display:flex;
	align-items:center;
	gap:7px;
	font-family:var(--font-mono);
	font-size:.5rem;
	font-weight:500;
	letter-spacing:.18em;
	color:#bfe9ff;
	margin-bottom:7px;
}
.aa-mypage__orb{
	width:15px;
	aspect-ratio:1;
	border-radius:50%;
	background:radial-gradient(circle at 35% 30%, #fff, var(--aos-cyan) 60%, #3a7fd0);
	box-shadow:0 0 12px rgb(111 214 255 / .8);
}
.aa-mypage__ai-greet{ color:#eef4ff; font-size:.85rem; font-weight:500; line-height:1.4 }
.aa-mypage__ai-tag{ color:#aebfe0; font-size:.62rem; margin-top:3px; line-height:1.5 }
.aa-mypage__ai-step{
	display:flex;
	align-items:center;
	gap:7px;
	margin-top:10px;
	padding:8px 10px;
	border-radius:12px;
	background:rgb(255 255 255 / .06);
	border:1px solid rgb(255 255 255 / .1);
	color:#e6edf8;
	font-size:.62rem;
	line-height:1.5;
}
.aa-mypage__spark{ font-size:.72rem }

/* --- 本人＋ランク --- */
.aa-mypage__profile{ display:flex; align-items:center; gap:11px; margin:14px 0 16px }
.aa-mypage__rank{
	position:relative;
	width:42px;
	aspect-ratio:1;
	border-radius:50%;
	border:2px solid var(--aos-emerald);
	background:radial-gradient(circle at 50% 55%, rgb(94 240 176 / .2), rgb(20 30 60 / .8));
	box-shadow:0 0 16px rgb(94 240 176 / .45);
}
/* ランクアイコン（ダイヤ） */
.aa-mypage__rank::before{
	content:"";
	position:absolute;
	inset:0;
	margin:auto;
	width:15px;
	height:15px;
	background:linear-gradient(160deg, #b8ffe4, var(--aos-emerald));
	clip-path:polygon(50% 0, 100% 38%, 50% 100%, 0 38%);
}
.aa-mypage__identity{ display:grid; gap:.2em }
.aa-mypage__identity b{ color:#eef4ff; font-size:.8rem; font-weight:500 }
.aa-mypage__identity i{ font-style:normal; color:#aebfe0; font-size:.6rem }

/* --- セクション見出し --- */
.aa-mypage__section-label{
	display:flex;
	align-items:baseline;
	gap:8px;
	flex-wrap:wrap;
	margin:0 2px 7px;
	color:#9fb4e0;
	font-size:.62rem;
	letter-spacing:.04em;
}
.aa-mypage__section-label span{ color:#5e7290; font-size:.56rem }

/* --- AOS QUEST --- */
.aa-mypage__card--quest{
	display:flex;
	align-items:flex-end;
	gap:12px;
	flex-wrap:wrap;
	background:rgb(16 26 52 / .5);
	border-top:2px solid #f0b454;
}
.aa-mypage__stat{ display:grid; gap:1px }
.aa-mypage__stat i{ font-style:normal; color:#9fb4e0; font-size:.54rem }
.aa-mypage__stat b{ color:#eef4ff; font-size:1.5rem; font-weight:500; line-height:1 }
.aa-mypage__stat b.is-gold{ color:var(--aos-gold) }
.aa-mypage__stat--right{
	margin-left:auto;
	color:#aebfe0;
	font-size:.58rem;
	display:flex;
	align-items:baseline;
	gap:.35em;
}
.aa-mypage__stat--right b{ font-size:.8rem }

/* --- クエストタイル --- */
.aa-mypage__tiles{ display:flex; gap:8px; margin-bottom:14px }
.aa-mypage__tile{
	flex:1 1 0;
	display:grid;
	justify-items:center;
	gap:5px;
	padding:12px 8px;
	border-radius:12px;
	background:rgb(255 255 255 / .05);
	border:1px solid rgb(255 255 255 / .08);
}
.aa-mypage__tile-icon{
	width:26px;
	aspect-ratio:1;
	border-radius:8px;
	background:rgb(111 214 255 / .14);
	border:1px solid rgb(111 214 255 / .2);
}
.aa-mypage__tile-name{ color:#e6edf8; font-size:.58rem }
.aa-mypage__tile-point{ color:var(--aos-gold); font-size:.8rem; font-weight:500 }

/* --- 月末予測 --- */
.aa-mypage__card--forecast{
	background:rgb(16 26 52 / .5);
	display:grid;
	gap:8px;
	margin-bottom:0;
}
.aa-mypage__forecast-bar{
	position:relative;
	display:block;
	height:6px;
	border-radius:999px;
	background:rgb(255 255 255 / .08);
	overflow:hidden;
}
.aa-mypage__forecast-bar::after{
	content:"";
	position:absolute;
	inset:0 auto 0 0;
	width:72%;
	border-radius:999px;
	background:linear-gradient(90deg, var(--aos-emerald), var(--aos-cyan));
	box-shadow:0 0 14px rgb(111 214 255 / .5);
}
.aa-mypage__forecast-note{ color:#aebfe0; font-size:.58rem }

/* --- 画面内の要素が順に立ち上がる --- */
.aa-mypage__screen > *{
	opacity:0;
	transform:translateY(8px);
	transition:opacity 520ms var(--ease-out), transform 520ms var(--ease-out);
	transition-delay:calc(var(--index,0) * 110ms + 300ms);
}
[data-aa-reveal].is-visible .aa-mypage__screen > *{ opacity:1; transform:none }
.no-js .aa-mypage__screen > *{ opacity:1; transform:none }
@media (prefers-reduced-motion:reduce){
	.aa-mypage__screen > *{ opacity:1 !important; transform:none !important }
}

/* 端末画面内の星空（modules/starfield.js が生成） */
.aa-mypage__screen > .aa-sky{ z-index:0 }
.aa-mypage__screen > *:not(.aa-sky){ position:relative; z-index:1 }